<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                text-align: center;

            }

            .container{

                display: flex;

                justify-content: center;

            }

            .colorBox{

                width: 100px;

                height: 100px;

                border:1px solid gray;

                margin: 0 20px;

            }

            .showBox{

                width: 100px;

                height: 100px;

                border:5px dashed gray;

                margin: 0 auto;

            }

            .colorBox:nth-child(1){

                background-color: orange;

            }

            .colorBox:nth-child(2){

                background-color: skyblue;

            }

            .colorBox:nth-child(3){

                background-color: yellowgreen;

            }

            img{

                border: 1px solid gray;

                margin:0 20px;

            }

        </style>

    </head>

    <body>

        <!--h1{支持拖拽的元素}+img[src='images/lf.jpg']*3+h1{需要开启拖拽的元素}+div.colorBox*3+h1{展示框}+div.showBox-->

        <h1>支持拖拽的元素</h1>

        <img src="data:images/lf.jpg" alt="" />

        <img src="data:images/nm.jpg" alt="" />

        <img src="data:images/sl.jpg" alt="" />

        <h1>需要开启拖拽的元素</h1>

        <div class='container'>

            <!--添加开启拖拽属性-->

            <div class="colorBox" draggable="true"></div>

            <div class="colorBox" draggable="true"></div>

            <div class="colorBox" draggable="true"></div>

        </div>

        <h1>展示框</h1>

        <div class="showBox"></div>

    </body>

</html>

<script type="text/javascript">

    // 定义全局变量 保存 拖放元素

    var moveDom ;

    // 让元素 能够被 拖放的内容 丢进去

    document.querySelector('.showBox').ondragover = function (e){

        //防止浏览器默认行为(W3C)

        e.preventDefault();

    }

    // 拖放元素 丢到 容器内 会触发 ondrop事件

    // 如果没有在 ondragover中 阻止默认行为 那么 无法触发 ondrop事件

    document.querySelector('.showBox').ondrop = function (){

        //console.log(moveDom);

        if(moveDom.src){

            // 如果 src有值 那么设置src属性

            // 获取 moveDom的src属性 并赋值给 盒子即可

        this.style.background = 'url('+moveDom.src+')no-repeat center/cover';

        }else{

            // 如果src没有值 那么 设置背景颜色

//            console.log(moveDom);

//            console.log(moveDom.style.backgroundColor);

            // 该方法 返回的内容是 style属性

            // getComputedStyle 能够获取 style标签中 写的样式

            console.log(window.getComputedStyle(moveDom).backgroundColor);

            this.style.backgroundColor = window.getComputedStyle(moveDom).backgroundColor;

        }

    }

    // 当我们开始拖放元素的时候 会触发 ondragstart事件

    var imgs = document.querySelectorAll('img');

    for (var i=0;i<imgs.length;i++) {

        imgs[i].ondragstart = function (){

            moveDom = this;

        }

    }

    // 为div绑定拖拽开始事件

    var colorBoxs = document.querySelectorAll('.colorBox');

    for (var i=0;i<colorBoxs.length;i++) {

        colorBoxs[i].ondragstart = function (){

            moveDom = this;

        }

    }

</script>

Css3中拖拽效果的实例(带有注释~欢迎指教)的更多相关文章

  1. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  2. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  3. RecyclerView 与 ItemTouchHelper 实现拖拽效果

    截图 需求 App 开发新的需求,要求 RecyclerView 实现的九宫格样式可以拖拽,松手以后变更位置,类似于手机桌面拖动 app 变更位置. 分析 经过搜索,发现 support 中带有一个类 ...

  4. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  5. Swift2.0下UICollectionViews拖拽效果的实现

    文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...

  6. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  7. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  8. 测试css3的动画效果在display:none的时候不耗费性能

    也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...

  9. element-UI ，Table组件实现拖拽效果

    拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

随机推荐

  1. [Xamarin.Android]如何引用JAR檔案 (转帖)

    這個範例是如何在Xamarin.Android中去使用一個我們自行在開發的JAR檔案. 主要會執行的步驟如下 1. 在Xamarin建立一個Android Java Bindings Library ...

  2. linux命令-寻找超过100M的文件，并将其删除

    find / -type f -size +100M | xargs rm -rf 其中第一个/表示路径,此时表示的是根目录,也就是搜索全部的文件 -type表示类型 f表示是文件 -size 表示大 ...

  3. linux主机名莫名其妙变成了bogon,并解决修改为localhost

    起因:公司网络接口做了接口认证,虚拟机桥接至物理网卡无法完成认证进行网络访问,无奈之下只能讲虚拟机网络模式更改为NAT模式,更改完成之后进行ssh登录,发现主机名发生了变化. 更改NAT模式之前 [r ...

  4. ubuntu18.04 安装docker

    https://docs.docker.com/install/linux/docker-ce/ubuntu/#install-docker-ce-1Change "stable" ...

  5. 学生信息管理系统（C语言版本）

    这是我个人写的一个学生管理系统,这是我仅仅用来练手的代码,要知道链表可是你在面试过程中最大机率会考到的,我是陆续从单向链表入门,然后采用双向链表写的代码!如有BUG,请指正,让我们共同进步! 1 #i ...

  6. 带你走近WebSocket协议

    一.WebSocket协议是什么? WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 二.那为什么我们要用WebSocket协议呢? 了解计算机网络协议的 ...

  7. 最新的 Vue 相关开源项目库汇总

    优秀的vue 开源后台管理开源系统框架 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/README UI组件 开发框架 实用库 ...

  8. [转]Calling an OData Service From a .NET Client (C#)

    本文转自:https://docs.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/odata- ...

  9. StatusStrip控件

    态栏用于显示用户状态的简短信息.   StatusStrip控件是由system.windows.forms.statusStrip类提供,作用是在应用程序中标识对话框底部的一栏,通常用于显示应用程序 ...

  10. android RecyclerView简单的使用

    转自:https://blog.csdn.net/lmj623565791/article/details/45059587 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了, ...