下面是一个拖放例子

定义如下的两个div，分别是用于拖放后放置新元素的容器和可拖动的元素；

<body>

    <div id="holder" style="width: 200px; height: 200px; background: #ff4400;" ondrop="drop(event);"

         ondragover="dragover(event);"></div>

    <div id="module" style="width: 100px; height: 100px; background: #f0abcd;" draggable="true"

         ondragstart="dragstart(event);"></div>

</body>

定义Javascript方法，用于处理拖放事件；

  1. <script>
    function dragstart(evt) {
    evt.dataTransfer.setData('targetId', evt.target.id);
    }

    function drop(evt) {
    evt.preventDefault();
    var data = evt.dataTransfer.getData("targetId");
    evt.target.appendChild(document.getElementById(data));
    }

    function dragover(evt) {
    evt.preventDefault();
    }
    </script>

分析：

  • draggable="true"; // 设置元素可拖动;
  • ondragstart&setData; // 在ondragstart回调方法中调用setData来设置被拖动数据的值，如果不调用setData，则拖动事件不会继续传递下去；
  • ondragover; // 该事件规定在何处旋转被拖动的数据，默认无法将数据/元素旋转到其它元素中，如果要设置成允许旋转，必须阻止对元素的默认处理方式；
  • ondrap; // 当放置被拖放数据时，会触发ondrop回调事件，在ondrop中对拖放进行处理;

Step

  1. 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  2. 通过 dataTransfer.getData("targetId") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  3. 被拖数据是被拖元素的 id ("module1")
  4. 把被拖元素追加到放置元素（目标元素）中

浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注：在 Safari 5.1.2 中不支持拖放。

ref: http://www.w3school.com.cn/html5/html_5_draganddrop.asp

Html5 drag&drop的更多相关文章

  1. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  2. HTML5 drag & drop & H5 DnD

    HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...

  3. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  4. HTML5 drag & drop 拖拽与拖放

    关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...

  5. HTML5 Drag & Drop

    一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...

  6. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  7. atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结

    atitit.D&D drag&drop拖拽文件到界面功能 html5 web 跟个java swing c#.net c++ 的总结 1. DND的操作流程 1 2. Html5 注 ...

  8. HTML5中的拖拽与拖放(drag&&drop)

    1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...

  9. HTML 学习笔记 （drag & drop）

    拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...

随机推荐

  1. 基础的 sparkSQL操作

    spark连接mysql操作 数据库jdbc 连接封装 package test.com import org.apache.spark.sql.{DataFrame, SparkSession} / ...

  2. 从零开始的Python学习Episode 20——面向对象（3）

    面向对象之封装 封装,即隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别:将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体. 隐藏 在python中用双下划线开 ...

  3. JVM调优(2)

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  4. -lPods-NewsPushClientSDK is not an object file (not allowed in a library)

    今天在给客户定制SDK的过程中,出现了下面的一个问题,具有代表性,现在记录下来 问题: Showing All Errors Only : /Applications/Xcode.app/Conten ...

  5. PHP中的文件包含

    在PHP中,包含文件有两种方式:include和require.这两种方式的功能一样,只有一个区别,就是使用require包含一个文件时,如果出现错误,脚本不会继续执行:而如果使用include包含, ...

  6. scrum立会报告+燃尽图（第二周第二次）

    此作业要求参考: https://edu.cnblogs.com/campus/nenu/2018fall/homework/2247 一.小组介绍 组名:杨老师粉丝群 组长:乔静玉 组员:吴奕瑶.公 ...

  7. Scrum立会报告+燃尽图（十二月九日总第四十次）：视频剪辑与用户反馈

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2484 项目地址:https://git.coding.net/zhang ...

  8. WebGL学习笔记五

    本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片,通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来.基本过程与前几章一致 ...

  9. 新的Calculator的规范作业

    附加作业题目 第三次作业 mygithub:sonnypp 这是开学来第一次写随笔,这一次的作业是对上一次作业的修改,对于上一次作业,在学长老师的帮助下,我重新修改了下代码,将.h文件分成了一个Sca ...

  10. 2016011998+sw

    Coding.net原码仓库地址:https://git.coding.net/laolaf/sw.git 目录 1 需求分析 2 功能设计 3 设计实现 4 算法详解 5 测试运行 6 满意代码 1 ...