<!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. C#常用总结《一》

    集合类常用: List<T> 泛型集合 Dictionary<key,value>  字典集合 文件读取: FileStream :对各种文件读写,字节处理更好 StreamR ...

  2. Mac 10.12安装Office 2011

    说明:由于WPS没有Mac版的,所以只能装这个,这个版本是2011的,基本够用了. 下载: (链接: https://pan.baidu.com/s/1pKGvXBP 密码: irw9)

  3. 【Kafka】Kafka数据可靠性深度解读

    转帖:http://www.infoq.com/cn/articles/depth-interpretation-of-kafka-data-reliability Kafka起初是由LinkedIn ...

  4. CentOS和Ubuntu系统下安装 HttpFS （助推Hue部署搭建）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  5. 多线程并发问题解决之redis锁

    一 问题背景 我们做的是医疗信息化系统,在系统中一条患者信息对医院中当前科室中的所有诊断医生是可见的,当有一个诊断医生点击按钮处理该数据时,数据的状态发生了变化,其他的医生就不可以再处理此患者的数据了 ...

  6. 解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  7. table中td 内容超长 自动折行 （含字母数字文字）

    <table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...

  8. <深入理解JavaScript>学习笔记(1)_编写高质量JavaScript代码的基本要点

    注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. JQuery是一个很强大的JavaScript 类库,在我刚刚接触JavaScript的就开始用了. JQuer ...

  9. 标准Trie字典树学习二：Java实现方式之一

    特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! 系列文章: 1. 标准Trie字典树学习一:原理解析 2.标准T ...

  10. 面向对象（基础oop）之属性与构造函数

    大家好,我叫李京阳,,很高兴认识大家,之所以我想开一个自己的博客,就是来把自己所了解的知识点通过自己的话写一下,希望被博客园的朋友们点评和一起讨论一下,也希望从博客园中多认识一些软件开发人员!现在我开 ...