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包 ...
随机推荐
- 基于Eclipse+Cordova的Android Hybrid应用开发环境搭建
环境说明 操作系统:Windows 7 64位 Eclipse版本:4.5.2 Release(eclipse-jee-mars-2) JDK版本:1.8 搭建步骤 1.从http://www.ecl ...
- latex 竖排子图的生成
latex命令如下: 需要的包为: \usepackage{graphicx} \usepackage{subfigure} \begin{figure*}%加*的作用是跨栏(双栏和单栏latex的区 ...
- 联想键盘 去掉fn
这个帖子 很实用 http://iknow.lenovo.com/detail/dc_039949.html 键盘驱动下载地址:http://support1.lenovo.com.cn/lenovo ...
- 解读浮动闭合最佳方案：clearfix
.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...
- selenium遇到readonly元素的输入
方法:去掉该元素的readonly属性 使用js来去掉 ((JavaScriptExecutor ) driver).executeScript($("input#{放置元素的CLASS}[ ...
- JavaSript模块化-AMD规范与CMD规范
JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...
- AE调用GP工具的方法（转）
第一,首先要明确自己需要调用arctoolbox里面的什么工具,实现什么样的功能. 第二,按照需求看看在arctoolbox工具中是怎么实现功能的,然后确定需要的数据源. 第三,编写command或t ...
- Ubuntu搭建svn服务器
一,安装必须的软件包. sudo apt-getinstall subversion 二,基本的SVN服务器配置 1,新建一个目录用于存储SVN所有文件 # ...
- UImenuController
长按出现选择项:关键方法 在 tabview 中需要制定 tabview 的一些方法:关键为 在某种特殊情况下,需要自定义的时候:采用如下方式
- 最近在做外贸网站的时候，需要大量的字体来充实页面，就学习了怎么引用Google Fonts
第一步,FQ进入谷歌官方字体网站:https://fonts.google.com 妥妥的. 第二步,点击你所选择字体演示块的右上角的加号,然后你所选择的字体会形成引用链接以及你所要写的css样式. ...