下面是一个拖放例子

定义如下的两个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. day22 模块-collections，time，random，pickle，shelve等

    一.引入模块的方式: 1. 认识模块 模块可以认为是一个py文件. 模块实际上是我们的py文件运行后的名称空间 导入模块: 1. 判断sys.modules中是否已经导入过该模块 2. 开辟一个内存 ...

  2. 为什么使用React Native

    React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP. React Native着力于提高多平台开发的开发效率 —— 仅需学习一次 ...

  3. c++ 使用this指针进行串联的函数调用

    如代码所示,在每个成员函数函数体最后返回*this.即可实现串联调用. class Time { public: Time(, , ); Time &setHour(int); Time &a ...

  4. python基础网络编程--转

    python之网络编程 本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 消息传递(管道.FIFO.消息队列) 同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 共享内存(匿名的 ...

  5. 20135316王剑桥 linux第三周课实验笔记

    通过使用标准的字符码能够对文档中的字母和符号进行编码. 三种重要的数字表现形式: 1. 无符号数:编码基于传统的二进制表示法表示大于或等于零的数字. 2. 补码:编码是表示有符号整数的最常见方法,可以 ...

  6. Sprint4

    进展:今天一天满课,晚上也没有做什么,所以今天一天没什么进展. 燃尽图:

  7. <<梦断代码>>读后感

    <梦断代码>中对软件工程所面临的种种困难与艰难的描述,即便再过5年读也许都不过时.因为正如原作者所说,书中描写的是一队人马并肩扛起代码大石,虽历经磨难仍欲将其推上山顶的故事,而正是这种故事 ...

  8. Jsp----注册登陆

    一.需求分析 目前99%的网站都会有用户的登陆注册界面(用户就是一切嘛).其需求可想而知. 二.设计过程及所查寻资料 通过寻找上课老师所给予的课件,搜寻相关内容:目前以获取相关有java web关于w ...

  9. flownet2.0 caffe anaconda2 编译安装

    1. 下载flownet2.0源码到指定目录 cd /home/zzq/saliency_models/deep_optical_flow git clone https://github.com/l ...

  10. angularJS1笔记-(2)-$watch方法监听变量的变化

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...