首先介绍一下HTML5拖拽过程中产生的事件：
如果A被拖动到B内部，则
1. A会触发ondragstart, ondrag, ondragend，分别代表拖拽开始，拖拽进行中和拖拽结束；
2. B会触发ondragenter, ondragover, ondragleave, ondrop，分别代表A物体进入B，在B上面，从B上方离开，在B上方松手停止拖拽；
3. 如果拖动本地文件，则不会触发ondragstart事件；
4. 事件间的数据传递使用e.dataTransfer.setDate(k, v)和e.dataTransfer.getData(k)。
需要注意的几点：
0. 将A的draggable属性设置为true，虽然你不设置可能也能拽；
1. dom默认拒绝对象在其内部放置，所以往往要用
B.ondragover = function(e){ e.preventDefault(); };
来取消掉默认事件；
2. 某些浏览器默认在拖放后以链接形式打开A，故需要使用
B.ondrop= function(e){ e.preventDefault(); };
3. firefox中拖放图片会打开新页面，这个还是比较烦的，解决方法是先获取body元素，然后
body.ondrop = function(e){ e.stopPropagation(); e.preventDefault(); //注意这俩位置不能反了 };
4. firefox中，无法通过ondrag等事件实时获取鼠标位置，如
A.ondrag = function(e){ console.log(e.offsetX, e.offsetY); };
这一般会输出两个0
解决方法是在document中设置事件监听
document.ondragover = function(e){ e = e.originalEvent || e; x = e.clientX || e.pageX; y = e.clientY || e.pageY; }
以下是一个实例，可在HTML页面中拖动图片：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; min-height: 700px; position: relative; } img{ position:absolute; left: 0; top: 0; } </style> </head> <body> <h3>可拖动赤酱</h3> <img id="chi" src="nyachichi.png" alt="chichiyan" draggable="true" /> <script> var chi = document.getElementById("chi"); var body = document.getElementsByTagName("body")[0]; var offsetX, offsetY, x, y; document.ondragover = function(e){ e = e.originalEvent || e; x = e.clientX || e.pageX; y = e.clientY || e.pageY; } body.ondragover = function(e){ e.preventDefault(); } body.ondrop = function(e){ e.stopPropagation(); e.preventDefault(); console.log("事件源chi拖动结束"); } chi.ondragstart=function(e){ console.log(‘事件源chi开始拖动‘); offsetX = e.offsetX; offsetY = e.offsetY; }
chi.ondrag=function(e){ <!-- console.log(‘事件源chi拖动中‘); --> } chi.ondragend=function(e){ e.preventDefault(); chi.style.left = x-offsetX + "px"; chi.style.top = y-offsetY + "px"; } </script> </body> </html>
