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包 ...
随机推荐
- Linux 系统时间和硬件时间
linux 的系统时间有时跟硬件时间是不同步的 Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel ...
- MemCache中的内存管理详解
MC的内存管理机制 1.内存的碎片化 当我们使用C语言或者其他语言进行malloc(申请内存),free(释放内存)等类似的命令操作内存的时候, 在不断的申请和释放的过程中,形成了一些很小的内存片段, ...
- this的指向（慢慢添加）
this的指向: 1.行间调用函数: <div id="div1" onclick="show()"></div> <script ...
- Apache Commons Lang
http://commons.apache.org/proper/commons-lang/javadocs/api-release/org/apache/commons/lang3/package- ...
- gdb 常用内容
gdb exegdb exe coregdb -p info m TAB ^関数の先頭 info b ^list the breakpoint set args -a test ^引数設定 show ...
- Android布局整理Relative/Linear
1.RelativeLayout布局 android:layout_centerHorizontal 水平居中 android:layout_centerVertical 垂直居中 android:l ...
- 数字图像处理作业使用OpenCV - 自定义直方图
第二次作业需要打印出来灰度直方图,当然不能使用ocv的自带calcHist函数来得到Mat对象了……结果上网搜索怎么用自己的数据创建直方图,搜到的都是直接用函数的_(:з」∠)_ 结果这个地方拖了好久 ...
- Python笔记总结week5
Decorator:多层装饰器 #双层装饰器(用户登录,权限) #多层: 调用从最外层到最内层函数,返回值则从最内到最外层函数 USER_INFO = {} #USER_INFO['is_login' ...
- ［IOS 开发］TableView如何刷新指定的cell 或section
//一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:]; [tableview reloadSections:ind ...
- 隔壁信概大作业xjb写——同化棋ATAXX
话说泥萌北大信科啊,助教是有多懒...去年黑白棋今年同化棋,顺带打ai都不用自己写标程... 好吧..我知道泥萌重点在各种sb的辅助操作上..什么悲剧的可以随时暂停载入...有毒吧 [据说泥萌上课没讲 ...