<!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. 一个读取propeties配置文件的工具类，线程安全的

    public class ConfigUtil { private static Map<String,Properties> map = new HashMap<String,Pr ...

  2. android禁用光感按键

    用RE浏览器打开/system/usr/keylayout下的qwerty.kl文件, 找到key 158 BACK key 139 MENU key 102 HOME 分别在其之前加下#号,如下: ...

  3. smart pointer (auto_ptr)

    很多人听说过标准auto_ptr智能指针机制,但并不是每个人都天天使用它.这真是个遗憾,因为auto_ptr优雅地解决了C++设计和编码中常见的问题,正确地使用它可以生成健壮的代码.本文阐述了如何正确 ...

  4. Linux下配置QT环境

    一.下载Qt源码包到本机,然后解压缩 #tar zxvf qt-x11-opensource-src-4.3.2.tar.gz -C /usr/local //将qt-x11-opensource-s ...

  5. 【翻译】五步快速使用LINQPad尝鲜StreamInsight

    StreamInsight  学习地址:http://www.cnblogs.com/StreamInsight/archive/2011/10/26/StreamInsight-Query-Seri ...

  6. 读<<如何阅读一本书>>乱七八糟的笔记1

    阅读层次 第一层:基础阅读 第二层:检视阅读 系统化略读 第三层:分析阅读 第四层:主题阅读(比较阅读) 第二层:检视阅读 1.有系统的粗读或略读 (1)先看书名页,然后如果有序就先看序 (2)研究目 ...

  7. eclipse 编码设置

    eclipse 编码设置 浏览:2840 | 更新:2013-12-31 10:07 一般Java文件编码格式是UTF-8的.以下以默认GBK改为UTF-8为例. 1.改变整个工作空间的编码格式,这样 ...

  8. javaweb笔记2之HTTP协议

    1 什么是http协议 是浏览器客户端  和  服务器端 数据传输的 格式规范: 2 查看http协议 (1)用火狐的firebug插件查看      (2)使用谷歌的Ghome查看(审查元素-> ...

  9. js点击按钮，放大对应图片代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 控制反转（IOC）/依赖注入（DI）理解

    个人学习笔记,来自Acode. 1.术语 控制反转/反向控制,英文全称“Inversion of Control”,简称IoC. 依赖注入,英文全称“Dependency Injection”,简称D ...