HTML5 拖动
触发的事件有：dragstart事件、drag事件和dragend事件。
按下鼠标键并开始移动鼠标的时候，会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线)，表示不能把元素放在自己上门。拖拽开始时，可以通过ondragstart事件处理程序运行JavaScript代码。
触发dragstart事件后，随即会触发drag事件，而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标，还是放到了无效的放置目标上)，都会发生dragend事件。
上面说的三个事件的目标都是被拖动的元素触发。默认情况下，浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候，会触发的事件有：dragenter事件、dragover事件和dragleave或者drop事件。
只要有元素被拖动到放置目标上，就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动是，会连续触发dragover事件。如果元素被拖出放置目标，dragover事件不再发生，但是会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。
自定义放置目标
在拖动元素经过某些无效放置目标的时候，可以看到一种特殊鼠标手势(圆环中一条反斜线)，表示不能放置。虽然所有元素都支持放置目标事件，但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件。不过，你可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。
重写了默认行为之后，就会发现当拖动着元素移动到放置目标上的时候，光标变成允许放置的符号。在Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上，页面就会转向图像文件。如果是把文本拖放到放置目标上，则会导致无效url错误。所以为了让Firefox支持政正常的拖放，还要取消drop事件的默认行为，阻止打开拖拽元素的URL。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 拖动</title>
<style type="text/css">
.box { width: 500px; padding: 10px; border: 1px solid #aaaaaa; height: 70px; }
#drag { background-color: #090; height: 70px; width: 150px; font-family: Arial; font-size: 14px; color: #FFF; text-align: center; line-height: 70px; }
</style>
<script type="text/javascript">
Object.prototype.startDrag=function(drop,callback){
this.draggable=true;
this.addEventListener('dragstart',function(e){
e.dataTransfer.setData('Text',e.target.id);
});
drop.addEventListener('dragover',function(e){
e.preventDefault();
});
drop.addEventListener('drop',function(e){
e.preventDefault();
this.dataTransfer={
target:document.getElementById(e.dataTransfer.getData('Text'))
};
callback(this);
});} window.onload = function() {
var drop = document.getElementById('box');
var drag = document.getElementById('drag');
drag.startDrag(drop, function(e){
e.appendChild(e.dataTransfer.target);
}); drag.startDrag(document.getElementById('boxrr'), function(e){
e.appendChild(e.dataTransfer.target);
}); }
</script>
</head>
<body>
<div id="box" class="box"></div>
<p> </p>
<div id="boxrr" class="box"></div>
<br />
<div id="drag">Drag it</div>
</body>
</html>
FQ出去问了下谷歌找到了DataTransfer的API，下面就介绍一下：
DataTransfer
拖拽数据传递对象，一般使用方式event.dataTransfer。
dataTransfer . dropEffect [ = value ]
拖拽效果，可选值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all”, and “uninitialized”。
dataTransfer . items
拖拽的数据集合，是一个数组。
dataTransfer . setDragImage (element, x, y)
Uses the given element to update the drag feedback, replacing any previously specified feedback.
英文有点拗口，就是拖拽过程中定义一个元素替换原有的，可以看到拖拽元素跟随的效果。
dataTransfer . addElement (element)
Adds the given element to the list of elements used to render the drag feedback.
dataTransfer . types
Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”.
data = dataTransfer . getData (format)
Returns the specified data. If there is no such data, returns the empty string.
获取自定义的数据格式，如ev.dataTransfer.getData("text");通常是配合ev.dataTransfer.setData使用。
dataTransfer . setData (format, data)
Adds the specified data.
添加自定义数据格式，如ev.dataTransfer.setData("text", ev.target.innerHTML);有点像jquery里面的data
dataTransfer . clearData ( [ format ] )
Removes the data of the specified formats. Removes all data if the argument is omitted.
清除自定义的数据格式及其数据。
dataTransfer . files
Returns a FileList of the files being dragged, if any.
拖拽的文件列表对象。
可参考，里面讲解很细：http://www.cnblogs.com/fsjohnhuang/p/3961066.html
HTML5 拖动的更多相关文章
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- html5拖动文件上传
使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...
- html5拖动滑块
html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...
- HTML5拖动画布/拖放
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...
- HTML5拖动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- html5拖动监听
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...
- HTML5学习笔记
参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...
- html5 “拖放”
拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...
- HTML实现文件拖动上传
在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...
随机推荐
- monkey 自己总结
adb shell monkey -p com.test.smstest --pct-touch 50 --pct-motion 30 --pct-nav 20 -s 10 -v --throttle ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- ASP.NET 页面间传递参数的方法
http://www.cnblogs.com/eoiioe/archive/2008/04/08/1142247.html
- DBUnit的一些注意事项
DatabaseOperation.TRUNCATE_TABLE.execute(con, ds);等对数据库的操作放在每个@Test方法中做而不是在@Before里做,可增加灵活性
- phalcon: 当删除循环删除一组数据,需要判断影响的行affectedRows
phalcon:有一个表,按日期查找半年以为的数据,由于数据量特别大,不能一次:delete删除数据,否则会造成数据表卡顿,数据库锁死. 那么只能循环的删除数据,每次删除100条左右,知道删除为止., ...
- 《Spark MLlib机器学习实践》内容简介、目录
http://product.dangdang.com/23829918.html Spark作为新兴的.应用范围最为广泛的大数据处理开源框架引起了广泛的关注,它吸引了大量程序设计和开发人员进行相 ...
- Missing (Mono Script), Missing Prefab
开始研究Google Cardboard SDK,下载了一份gvr-unity-sdk,用Unity打开里面的Samples: CastleDefense,导出XCode项目在iPhone上面运行,出 ...
- selenium ide脚本回放出现element not found
原因: 点击按钮,没有设置时间延迟,而页面加载,需要时间:当页面元素未加载完全,执行点击事件,就会报错:element... not found. 解决方案: 在点击事件前添加新的COMMAND.设置 ...
- Discuz！ X3.1直接进入云平台列表的方法
Discuz! X3.1已经改版,后台不能直接进云平台列表,不方便操作,操作云平台服务时,大家可以这样操作: 1.登录后台:2.访问域名进入云平台列表http://你域名/admin.php?fram ...
- 如何用fir.im 命令行工具 打包上传
1.注册fir.拿到token 2.安装 fir-cli 使用 Ruby 构建, 无需编译, 只要安装相应 gem 即可. $ ruby -v # > 1.9.3 $ gem install f ...