下面是一个拖放例子

定义如下的两个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. 01-numpy基础简介

    import numpy as np # ndarray ''' # 三种创建方式 1.从python的基础数据对象转化 2.通过numpy内置的函数生成 3.从硬盘(文件)读取数据 ''' # 创建 ...

  2. ifup,ifdown命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/jing99/p/7881779.html ifup命令网络配置 ifup命令用于激活指定的网络接口.ifdown命令用 ...

  3. Vim YouCompleteMe 安装配置

    YouCompleteMe是很强大的vim插件,可以提供强大的补齐功能,曾经多次尝试安装,都没有配置成功,最近在一个契机下,看到有同事的配置,自己在边尝试和边咨询后,终于也搞定了,遂记录下. 官网有最 ...

  4. mybatis 原理

    什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为 ...

  5. Beta Scrum Day 4 — 听说

    听说

  6. sql中Union和union all的使用

    该文转载自:http://www.cnblogs.com/chaobaojun/archive/2009/12/24/1631508.html 在MS-SQL如果将两个或更多查询的结果组合为单个结果集 ...

  7. Beta阶段 敏捷冲刺day1

    一.提供当天站立式会议照片一张: 二. 每个人的工作 (有work item 的ID) (1) 昨天已完成的工作: (2) 今天计划完成的工作: 今天大家一起讨论了一下之后几天的任务,以及如何对网页进 ...

  8. [转]string和stringstream用法总结

    转自:http://blog.csdn.net/xw20084898/article/details/21939811 作者:xw20084898 一.string string 是 C++ 提供的字 ...

  9. 关于Actions和Robot的区别简单说明

    Actions和Robot都是可以用来模拟键盘操作,但是两者还是有区别的 Actions actions =new Actions(driver) 实例化一个Actions后,我们可以使用action ...

  10. java 自定义异常的回顾

    一.异常的分类: 1.编译时异常:编译时被检测的异常 (throw后,方法有能力处理就try-catch处理,没能力处理就必须throws).编译不通过,检查语法(其实就是throw和throws的配 ...