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包 ...
随机推荐
- A*算法 -- 八数码问题和传教士过河问题的代码实现
前段时间人工智能的课介绍到A*算法,于是便去了解了一下,然后试着用这个算法去解决经典的八数码问题,一开始写用了挺久时间的,后来试着把算法的框架抽离出来,编写成一个通用的算法模板,这样子如果以后需要用到 ...
- Python学习---除法
python有两种除法,普通除法 a/b ,不论a,b精度 得到的都是浮点数. 4/2 = 2.0 3/5 = 0.6 floor除法,a//b , 得到一个舍弃小数位的整数结果,所以结果永远是 ...
- iOS使用Security.framework进行RSA 加密解密签名和验证签名
iOS 上 Security.framework为我们提供了安全方面相关的api: Security框架提供的RSA在iOS上使用的一些小结 支持的RSA keySize 大小有:512,768,10 ...
- console
你所不知道的 Console 2016-12-19 ZHANGXIANGLIANG JavaScript 转自 https://segmentfault.com/a/119000000672160 1 ...
- refactor window_x64微信小程序环境搭建
所需文件地址如下: https://github.com/zsyzsy/weixinxiaochengxun 1.下载微信开发工具0.7.0_x64 安装完成后,打开程序,进行微信扫码登录 2.下 ...
- SPSS数据分析-时间序列模型
我们在分析数据时,经常会碰到一种数据,它是由时间累积起来的,并按照时间顺序排列的一系列观测值,我们称为时间序列,它有点类似于重复测量数据,但是区别在于重复测量数据的时间点不会很多,而时间序列的时间点非 ...
- url的内容及格式
url的内容及结构: url格式:
- 基础算法之选择排序Selection Sort
原理 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾.以此类推,直到所有元素均排序完毕.一种简单直观的排序算 ...
- FTP多任务下载实现类
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- SharePoint Foundation 2013 安装出错
前段时间装foundation 13的时候遇到这个问题.怀疑是Office的问题.然后找了一些资料,问题得到了解决 解决方案: 运行 regedit,删除注册表下的office的LicenseType ...