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 ...
随机推荐
- gulp: Did you forget to signal async completion? 解决方案
背景 学习gulp的前端自动化构建,按照示例代码,跑了一个简单的task,控制台打出如下提示: The following tasks did not complete: testGulp Did y ...
- wordpress登录密码框明文显示最后一个输入的字符
wordpress登录密码框明文显示最后一个输入的字符 (function(a){a.fn.dPassword=function(c){var e={interval:200,duration:100 ...
- java程序设计课程实验报告3
北京电子科技学院(BESTI) 实 验 报 告 课程:java程序设计 班级:1353 姓名:陈都 学号:20135328 成绩: 指导教师:娄 ...
- pycharm 打开两个项目
1.之前用打开文件,选择一直选不到整个项目,打开也都是在已经打开的项目窗口中加载一个文件. 2.网上有介绍说设置,但是自己的pycharm经过中文汉化,许多设置项已消失不见... 3.最近打开,直接操 ...
- 树莓派与Arduino Leonardo使用NRF24L01无线模块通信之基于RF24库 (二) 发送自定义数据
在我的项目里,树莓派主要作为中心节点,用于接收数据,Arduino作为子节点,用于发送数据,考虑到以后会有很多子节点,但又不至于使得代码过于繁琐,因此所有的传输数据添加一个头部编号用于区分不同节点. ...
- InputStreamReader & OutputStreamWriter
InputStreamReader 是字节流通向字符流的桥梁:它使用指定的 charset 读取字节并将其解码为字符. OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 c ...
- Java 经典 书籍
1.<你的灯还亮着么> 方法论 2.<程序员修炼之道 从小工到专家> 方法论 3.<发布!软件的设计与部署> 案例&经验总结 4.<思考,快与慢> ...
- synchronized、锁、多线程同步的原理是咋样
先综述个结论: 一般说的synchronized用来做多线程同步功能,其实synchronized只是提供多线程互斥,而对象的wait()和notify()方法才提供线程的同步功能. 一般说synch ...
- 旧文备份:CANopen协议中SDO服务
SDO是服务数据对象接口(Service Data Obiect)的缩写,顾名思义提供服务数据的访问接口,服务数据就是一些实时性要求不高的数据,一般是指节点配置参数,因此,SDO一般用来配置和获得节点 ...
- 用css 修改 谷歌浏览器自带的 滚动条样式
::-webkit-scrollbar { width: 0.5rem;}/* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: ins ...