<!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. 利用scrapy-client发布爬虫的远程服务器

    一.环境准备 远程服务器必须装有scapyd,我们使用的机器必须有scrapy-client(我这里是windows),并确保这两者正常安装并启动. 二.客户端准备上传 首先进入到爬虫项目的根文件夹: ...

  2. Mac OS 10.12使用U盘重装（转）

    OS X Capitan和macOS Sierra的安装方式和下载系统的方法都是一致的,下面是OS X Capitan的安装方法: 一.准备工作: 准备一个8GB或者8G以上容量的U盘 确保里面的数据 ...

  3. Tableau学习系列之Tableau的工作区简介（工作表工作区、 仪表板工作区 和故事工作区 ）和基本概念

    不多说,直接上干货! 在首次进入Tableau或打开Tableau但没有指定工作簿时,会显示“开始页面”,其中包含了 近使用的工作簿.已保存的数据连接.示例工作簿和其他一些入门资源,这些内容将帮助初学 ...

  4. python-tornado-hello,world

    #!/usr/bin/python import tornado.httpserver import tornado.ioloop import tornado.options import torn ...

  5. docker搭建gitlab，设置邮件提醒，并运行runner

    接着http://www.cnblogs.com/wsy1030/p/8431837.html 在另一台机子运行gitlab: docker run --name='gitlab' -d -p 222 ...

  6. Struts dispatchAction

    在Struts中定义动态Action,不用定义多个Action,可以实现一个action,多个跳转. 在定义时,继承DispatchAction,并定义parameter的名字 在jsp页面选择act ...

  7. 我与ARM的那些事儿2JINLK烧录nor flash

    前言 最近在研究mini2440的友善之臂,但是我拿着的是实验室早期买的开发板,在做裸机开发的过程中老是不能很好地使用最新版的minitools进行烧录,因而各种不爽,因为生成了bin文件不能很好地传 ...

  8. 【转载】Vue 2.x 实战之后台管理系统开发（二）

    2. 常见需求 01. 父子组件通信 a. 父 -> 子(父组件传递数据给子组件) 使用 props,具体查看文档 - 使用 Prop 传递数据(cn.vuejs.org/v2/guide/co ...

  9. 文件夹操作之判断是否存在（Directory）

    Directory类用于操作文件夹,用于创建.移动和枚举目录和子目录的静态方法.DirectoryInfo类用于典型操作,如复制,移动,重命名,创建和删除目录.他们都可用于获取和设置相关属性或有关创建 ...

  10. Hadoop源码学习笔记(3) ——初览DataNode及学习线程

    Hadoop源码学习笔记(3) ——初览DataNode及学习线程 进入了main函数,我们走出了第一步,接下来看看再怎么走: public class DataNode extends Config ...