<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #demo1 {

            margin: 20px;

        }

        #demo1 .panel-list {

            overflow: hidden;

            list-style: none;

            margin: 0;

            padding: 0;

        }

        #demo1 .panel-item {

            float: left;

            margin-right: 30px;

            width: 100px;

            height: 100px;

            background: #ddd;

            border: 1px solid #ddd;

        }

        #demo1-src {

            display: inline-block;

            width: 50px;

            height: 50px;

            background: purple;

        }

        #demo1 .over {

            border: 1px dashed #000;

            -webkit-transform: scale(0.8, 0.8);

        }

    </style>

</head>

<body>

<div id="demo1">

    <ul class="panel-list">

        <li class="panel-item"></li>

        <li class="panel-item"></li>

        <li class="panel-item"></li>

        <li class="panel-item"></li>

        <li class="panel-item"></li>

    </ul>

    <h2>拖拽下面的方块到上面任意容器中</h2>

    <!-- 设置draggable使元素成为可拖拽元素 -->

    <span class="movable" id="demo1-src" draggable="true"></span>

    <script>

        (function () {

            var dnd = {

                // 初始化

                init: function () {

                    var me = this;

                    me.src = document.querySelector('#demo1-src');

                    me.panelList = document.querySelector('.panel-list');

                    // 为拖拽源监听dragstart,设置关联数据

                    me.src.addEventListener('dragstart', me.onDragStart, false);

                    // 拖拽鼠标移入元素,在拖放目标上设置视觉反馈

                    me.panelList.addEventListener('dragenter', me.onDragEnter, false);

                    // 取消元素dragover默认行为,使其可拖放

                    me.panelList.addEventListener('dragover', me.onDragOver, false);

                    // 拖拽移出元素,清除视觉反馈

                    me.panelList.addEventListener('dragleave', me.onDragLeave, false);

                    // 鼠标释放,在拖放目标上接收数据并处理

                    me.panelList.addEventListener('drop', me.onDrop, false);

                },

                onDragStart: function (e) {

                    e.dataTransfer.setData('text/plain', 'demo1-src');

                },

                onDragEnter: function (e) {

                    if (e.target.classList.contains('panel-item')) {

                        e.target.classList.add('over');

                    }

                },

                onDragLeave: function (e) {

                    if (e.target.classList.contains('panel-item')) {

                        e.target.classList.remove('over');

                    }

                },

                onDragOver: function (e) {

                    e.preventDefault();

                },

                onDrop: function (e) {

                    var id = e.dataTransfer.getData('text/plain');

                    var src = document.getElementById(id);

                    var target = e.target;

                    if (target.classList.contains('panel-item')) {

                        target.appendChild(src);

                        target.classList.remove('over');

                    }

                }

            };

            dnd.init();

        }());

    </script>

</div>

</body>

</html>

参考来源  https://segmentfault.com/a/1190000002810962

原生拖拽,拖放事件(drag and drop)的更多相关文章

  1. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  2. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  3. Android 用户界面---拖放（Drag and Drop）（三）

      设计拖放操作 本节主要内容如下: 1.  如何开始拖拽: 2.  在拖拽期间如何响应事件: 3.  如何响应落下事件: 4.  如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...

  4. Android 用户界面---拖放（Drag and Drop）（二）

      拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...

  5. Android 用户界面---拖放（Drag and Drop）（一）

    用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...

  6. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  7. HTML5 CSS3 专题 : 拖放 （Drag and Drop）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...

  8. Blazor 使用拖放（drag and drop）上传文件

    在很多上传文件的应用实例中, 都可以看到[拖放文件到此上传]这种骚功能 ,今天我们就来试试Blazor能不能完成这个想法. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放,也能够 ...

  9. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

随机推荐

  1. Python自动化运维之5、内置函数

    python3.x内置函数 官网详解 一些例子:后期慢慢接触到再补充 # help() 详细查看某个类有那些方法或者方法的具体使用 >>> help(str) >>> ...

  2. Linux学习——卸载Ubuntu，安装CentOS，第一次使用命令

    最近,看了相关的资料,发现Ubuntu不是很利于学习Linux操作系统,而CentOS比较有利于学习Linux操作系统,就卸载了. 当然,对于菜鸟,自然是很没有主见. 卸载Ubuntu感觉很奇怪,下来 ...

  3. chrome 打不开网页

    右键单击Chrome在桌面的快捷方式,在在但中选择“属性”,在对话框的“目标”项目中追加:-no-sandbox     大家比较熟悉的解决方法有配置 Hosts 文件和使用FQ软件两种,配置 Hos ...

  4. 文件上传[Uploadify]

    Uploadify文件上传插件 Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合 ...

  5. hdu5136：组合计数、dp

    题目大意: 求直径长度为N的无根二叉树的个数(同构的只算一种) 分析: 分析发现直径长度不好处理!因此考虑把问题转化一下: 假设要求直径为N的二叉树 (1) 若N为偶数,将树从直径中点的边断开,则分成 ...

  6. cURL中的超时设置

    访问HTTP方式很多,可以使用curl, socket, file_get_contents() 等方法. 在访问http时,需要考虑超时的问题. CURL访问HTTP: CURL 是常用的访问HTT ...

  7. C++ primer 中文第三版 阅读笔记 第八章

    一.寄存器对象: 函数中频繁被使用的变量可以加上register就可声明为寄存器对象.对于寄存器对象,假如能够放到寄存器中就会放到寄存器中,放不到的话就放到内存中.比如 register int  a ...

  8. Parsing XML in J2ME

    sun的原文,原文地址是http://developers.sun.com/mobility/midp/articles/parsingxml/. by Jonathan KnudsenMarch 7 ...

  9. uva 10626 - Buying Coke(记忆化搜索）

    题目链接:10626 - Buying Coke 题目大意:给出要买可乐的数量, 以及1元,5元和10元硬币的数量, 每瓶可乐8元,每次照钱会按照最少硬币的方式找回, 问如何投币可使得投入的硬币数最少 ...

  10. Android--Service之绑定服务交互

    前言 开篇名义,这篇博客介绍一下Android下使用绑定服务进行时数据交互的几种方法.关于Android下Service的内容,前面两篇博客已经介绍了,不清楚的可以移步过去先看看:Android--S ...