下面是一个拖放例子

定义如下的两个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. vue项目部署流程

    用vue-cli搭建的做法1.npm run build2.把dist里的文件打包上传至服务器 例 /data/www/,我一般把index.html放在static里所以我的文件路径为:/data/ ...

  2. Java 内存模型_2

    title: Java 内存模型_2 date: 2017-01-28 02:04:06 tags: [JMM] categories: [Programming,Java] --- Why 理解 J ...

  3. sync命令详解

    转:https://blog.csdn.net/everything1209/article/details/50423679 1.谁和谁同步? 2.为什么要同步?复制移动的过程不是同步的吗,都发生了 ...

  4. 插件使用_kindeditor

    1.官网 进入官网:http://kindeditor.net/demo.php 插件下载:http://kindeditor.net/down.php 2.使用 (1)文件夹说明 ├── asp a ...

  5. python判断文件和文件夹是否存在、没有则创建文件夹

    原文出处:https://www.cnblogs.com/hushaojun/p/4533241.html >>> import os >>> os.path.ex ...

  6. TFS任务预览

    不太熟悉TFS任务项的建立. 初步建立及按老师要求分配到个人的任务设置与时间安排如下: (长时间任务可由多人合作完成,具体根据情况迅速调整任务分配) 加上每人需要进行阅读前一小组的代码需要时间2*8= ...

  7. coreseek优化

    问题前提: 这篇博客是在你已经安装并使用coreseek的前提下,并且在使用过程中发现当前默认的分词效果不佳时作为参考. 解决方案: 1.扩展基本词典 参考: http://jockchou.gith ...

  8. Swift-懒加载使用

    //    懒加载 lazy var tableView : UITableView = {         let tempTableView = UITableView()         ret ...

  9. 软工网络15团队作业8——Beta阶段敏捷冲刺（Day6）

    提供当天站立式会议照片一张 每个人的工作 1.讨论项目每个成员的昨天进展 赵铭: 数据库整理. 吴慧婷:我的世界界面完成部分. 陈敏: 我的世界功能--学习情况功能完成. 吴雅娟:我的世界功能--学习 ...

  10. #Leetcode# 692. Top K Frequent Words

    https://leetcode.com/problems/top-k-frequent-words/ Given a non-empty list of words, return the k mo ...