触发的事件有：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>&nbsp;</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 拖动的更多相关文章

  1. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  2. html5拖动文件上传

    使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...

  3. html5拖动滑块

    html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...

  4. HTML5拖动画布/拖放

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...

  5. HTML5拖动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. html5拖动监听

    在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...

  7. HTML5学习笔记

    参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...

  8. html5 “拖放”

    拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...

  9. HTML实现文件拖动上传

    在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...

随机推荐

  1. 【Java】集合_学习笔记

    一.集合 1.集合类也称容器类,主要负责保存.盛装其他数据. 2.集合可以保存数量不确定的数据,保存具有映射关系的数据(也称关联数组). 3.Java5后提供一些多线程安全的集合类,放在java.ut ...

  2. ajax 和 post 传多个参数值具体怎么写

    ajax data:{id:id,name:name} 正确 data:{id:"001",name:"王俊凯"} 正确 data:{"id" ...

  3. viewPager 的可滑动 Title

    有三种方式: 1. 系统提供的title 缺点:标题在viewpager的滑动过程中也会滑动 实现:在ViewPager布局中添加 PagerTabStrip 或者是 PagerTitleStrip ...

  4. 【LeetCode】Hamming Distance

    问题网址 https://leetcode.com/problems/hamming-distance/ 就是一个异或后,求1的位数的问题. 看到问题之后,首先困扰是: int能不能求异或?是不是要转 ...

  5. Linux乱码问题解决方案

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  6. adb命令学习

    录制屏幕操作Android4.4版本以上支持录制屏幕 adb shell screenrecord /sdcard/demo.mp4 ADB logcat 输出时间信息: adb logcat -v ...

  7. monkeyrunner自动化测试

    通过MonkeyRunner遍历apk文件夹里的apk文件,实现自动安装应用,打开应用,截图,将截图与提前准备好的基线图做对比,对比相似度达到90%时,则对比通过,然后自动卸载应用,进入下一个APK文 ...

  8. [CentOS 7] 安装nginx

    下载对应当前系统版本的nginx包(package) # wget  http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-cent ...

  9. 检查失败，<master>分支有过其他更新，请先在本地合并<master>分支的代码

  10. Stack与Queue

    一.Stack的方法 1. public void push(int node)  把项 压入栈顶.其作用与 addElement (node) 相同.   不一定是int,可以是节点 stack.p ...