<!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. Jedis操作Redis--SortedSet类型 (会自然排序)

    /** * SortedSet(有序集合) * ZADD,ZCARD,ZCOUNT,ZINCRBY,ZRANGE,ZRANGEBYSCORE,ZRANK,ZREM,ZREMRANGEBYRANK,ZR ...

  2. JS实现瀑布流

    HTML:先让图片充满一页 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

  3. pycharm使用github

    pycharm使用github 绑定账号 File-settings 在搜索框输入git 会出现github,然后在旁边输入你github的用户名和密码,可以点击”test”测试一下,如果出现: Co ...

  4. WindowsServer2008安装IIS相关服务

    控制面板->程序->打开或关闭Windows功能 添加角色,选择IIS服务器,选择以下角色服务,如果添加过就选择添加角色服务 如果出现500错误,这个跟程序没有多大关系,可以试一下以下操作 ...

  5. 运维监控之zabbix（yum安装）

    简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...

  6. json test

    public static void main(String[] args) { class B { String name; public String getName() { return nam ...

  7. ognl,jstl,struts2标签中符号#,$,%的用法

    STRUTS2标签操作Map <s:iterator value="sundayMap">           <td colspan="7" ...

  8. ASP.NET Core 的启动和运行机制

    目录 ASP .NET Core 的运行机制 ASP .NET Core 的启动 ASP .NET Core 的管道和中间件 参考 ASP .NET Core 的运行机制 Web Server: AS ...

  9. Visual Studio、.net framework、CLR与JDK、JRE、JVM、Eclipse

    .net平台                                        java平台 开发工具                   Visual Studio            ...

  10. 一个简单好用的强制删除软件geek

    给大家推荐geek软件工具,一个可以用来强制卸载那些常规手段无法卸载的软件,到官网(https://geekuninstaller.com/download)下载免费版,运行软件后,选择需要强制删除软 ...