Html5 drag&drop
下面是一个拖放例子
定义如下的两个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方法，用于处理拖放事件；
- <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
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("targetId") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("module1")
- 把被拖元素追加到放置元素（目标元素）中
浏览器支持
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的更多相关文章
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- HTML5 drag & drop & H5 DnD
HTML5 drag & drop H5 DnD https://html5demos.com/ demos https://html5demos.com/dnd-upload https:/ ...
- HTML5 drag & drop 拖拽与拖放简介
DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...
- HTML5 drag & drop 拖拽与拖放
关键词: 1. draggable:规定元素是否可拖动的,draggable=true可拖动 2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer 3 ...
- HTML5 Drag & Drop
一定要区分不同事件产生的对象 源元素 属性:draggable = "true" 事件: ondragstart:开始拖拽 ondragend:拖拽结束 目标元素 事件: ondr ...
- HTML5魔法堂：全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- 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 注 ...
- HTML5中的拖拽与拖放(drag&&drop)
1.drag 当拖动某个元素时,将会依次触发下列事件: 1)dragstart:按下鼠标键并开始移动鼠标时,会触发该事件 2)drag:dragstart触发后,随即便触发drag事件,而且在元素被拖 ...
- HTML 学习笔记 （drag & drop）
拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.过去,我们用监听鼠标的Mousedown.Mouseo ...
随机推荐
- 【文章存档】Azure Web 应用如何修改 IIS 配置
链接 https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-h ...
- 将本地开发完的SDK代码上传到SVN上面：an error occurred while contacting the repository The server may be unreachable or the URL may be incorrect
将本地开发完的SDK代码上传到SVN上面:an error occurred while contacting the repository The server may be unreachabl ...
- No.11_功能规格说明书
功能规格说明书 • 基本目标 为用户提供更加便捷和人性化的闹钟提醒服务,以群组为单位规划时间安排与分配,对于个人用户,实现个人的设置闹钟,取消闹钟的操作,这些操作将会上传至数据库,并被同步到所有的客户 ...
- 20172319 实验三 《敏捷开发与XP实践》 实验报告
20172319 2018.05.17-30 实验三 <敏捷开发与XP实践> 实验报告 课程名称:<程序设计与数据结构> 学生班级:1723班 学生姓名:唐才铭 学生学号:20 ...
- Code128
条形码 条形码(barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常见的条形码是由反射率相差很大的黑条(简称条)和白条(简称空)排成的平行线图案.条形 ...
- 进阶系列（5）—— C#XML使用
一.XML介绍 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境中跨 ...
- c++第七次作业____最后的总结
先言: 在这过程中学到: 第二次作业Github的使用 第四次作业计算器的计算 ps:表达式处理以及计算 第五次作业文件的处理问题 第六次作业界面的设计 总结: 1.这学期的计算器,做的有点匆忙,偶尔 ...
- sql经常出现死锁解决办法
文章:sql server在高并发状态下同时执行查询与更新操作时的死锁问题
- 一致性Hash算法(KetamaHash)的c#实现
Consistent Hashing最大限度地抑制了hash键的重新分布.另外要取得比较好的负载均衡的效果,往往在服务器数量比较少的时候需要增加虚拟节点来保证服务器能均匀的分布在圆环上.因为使用一般的 ...
- 评论alpha发布
第一组:新蜂小组 题目:俄罗斯方块 评论:很荣幸被邀请体验此游戏,感到加速下落时不是很灵敏,没有计分,页面不够美观(据说还在改善),整体框架已完成,基本功能已具备. 第二组:天天向上 题目:连连看 评 ...