<!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. 【Sublime】Sublime插件

    alignmentcodecs33convertToUtf8sublimeAstyleFormattersublimeLintersublimeLInter-contrib-clangtagInput ...

  2. 解决Ubuntu系统的每次开机重启后，resolv.conf清空的问题和DNS域名解析问题（图文详解）

    不多说,直接上干货! 问题情况描述如下: 普及知识:   /etc/resolv.conf ,其实是一个Link .它其实指向的是 /run/resolvconf/resolv.conf.  Ubun ...

  3. javascript中的function 函数名(){} 和 函数名:function(){}有什么不同

    function functionName(){};这是定义一个函数 functionName:function(){};是设置一个对象的方法. 下面举一个例子: <html> <h ...

  4. 逻辑备份,mysqldump,SELECT…INTO OUTFILE,恢复

    逻辑备份 mysqldump mysqldump备份工具最初由Igor Romanenko编写完成,通常用来完成转存(dump)数据库的备份以及不同数据库之间的移植,例如从低版本的MySQL数据库升级 ...

  5. getSqlMapClientTemplate().insert()方法的返回值问题

    insert方法的返回值     今天碰到一个问题,就是关于ibatis的insert方法的返回值的问题.在网上找了很多例子,自己也亲自试了一下. 最后得出结论:insert方法返回的是在表中插入记录 ...

  6. 《TCP/IP详解》

    TCP/IP概述 Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本 ...

  7. OpenStack Object Storage（Swift）概述

    概述 OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之一,被称为对象存储,提供了强大的扩展性.冗余和持久性. Swift并不是文件系统或者实时 ...

  8. this说明

    这个This就表示当前实例的对象,用this可访问属性,this.Fist:

  9. Cheatsheet: 2017 10.01 ~ 12.31

    Mobile Updating Your App for iOS 11 Get Started With Natural Language Processing in iOS 11 Getting S ...

  10. [javaSE] GUI（鼠标事件）

    调用Button对象的addMouseListener方法,参数:MouseListener对象,这个类是个接口,需要实现以下方法 mouseClicked mousePressed mouseRel ...