下面是一个拖放例子

定义如下的两个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. 基于Python的信用评分卡模型分析（一）

    信用风险计量体系包括主体评级模型和债项评级两部分.主体评级和债项评级均有一系列评级模型组成,其中主体评级模型可用“四张卡”来表示,分别是A卡.B卡.C卡和F卡:债项评级模型通常按照主体的融资用途,分为 ...

  2. python如何与以太坊交互并将区块链信息写入SQLite

    关于区块链介绍性的研讨会通常以易于理解的点对点网络和银行分类账这类故事开头,然后直接跳到编写智能合约,这显得非常突兀.因此,想象自己走进丛林,想象以太坊区块链是一个你即将研究的奇怪生物.今天我们将观察 ...

  3. JS中判断对象是不是数组的方法

    JavaScript中检测对象的方法 1.typeof操作符 这种方法对于一些常用的类型来说那算是毫无压力,比如Function.String.Number.Undefined等,但是要是检测Arra ...

  4. 10分钟入门git简易教程

    在注册了github账号之后,一度不知道该如何使用. 在仔细研究了github的官方说明文档.廖老师的教程.还有许多博主的文章之后,总算对github的操作和体系有了较为深刻的了解,还有这篇简单的入门 ...

  5. 数据库——SQL数据定义

    数据定义  SQL的数据定义语句 操 作 对 象 操  作  方  式 创  建 删  除 修  改 表 CREATE TABLE DROP TABLE ALTER TABLE 视  图 CREATE ...

  6. “学霸系统”app——NABC

    “学霸系统”客户端项目是我们小组本次的课题. 一.需求(need) 对于这款软件,我们的目标是在手机端移植并实现网页端已有的用户管理.搜索.分类.上传下载.用户贡献与交互等功能,从而完成从PC到终端的 ...

  7. Linux 目录结构及文件基本操作

    Linux 目录结构及文件基本操作 实验介绍 1.Linux 的文件组织目录结构. 2.相对路径和绝对路径. 3.对文件的移动.复制.重命名.编辑等操作. 一.Linux 目录结构 在讲 Linux ...

  8. 150314 解决老师给二柱子出的问题 之 ver1.0

    一个晚上的成果,效果捉鸡,代码很乱.暂定ver1.0 //Powered by LZR! 2015.3.14#include<iostream> #include<stdio.h&g ...

  9. Task 4 求数组的连续子数组的最大和（团队合作）

    小组成员:李敏.刘子晗 1.设计思想:由于已经做过这个题目,只要对之前的程序加上相应的测试和约束即可.我们两个人一起商议后,决定了程序的主框架和并列出了最终可以实现的功能.先要定义数组长度和上下限的变 ...

  10. Good Time 冲刺 六

    一.今日完成任务情况 第六天 日期:2018.6.19 王怡镔:今天完善了页面,对部分不足进行改进. 于鑫宇:对界面进行完善. 胡雅馨:今天完成前端页面,并改善后端,完善项目. 黄 鹤:做完最后的打卡 ...