拖动事件小记

H5 新增了拖动事件，根据一些文档描述如下：

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag- 元素正在拖动时触发

ondragend- 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover- 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave- 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop- 在一个拖动过程中，释放鼠标键时触发此事件

以上分组很清楚的表名了相应时间触发的时机，这一点很重要，因为需要获取event对象，如果搞不清楚每个事件触发的时机和元素，那event对象就会非常迷茫，书写逻辑也会晕头转向。

这些事件对开发起了很大帮助，记得早些时候开发一个拖动元素功能，是配合mousedown,mousemove,mouseup这三个事件，在加上一大堆pageXY和topleft的计算（拖动过程），最后appendChild()完成，如果需要保留源元素，还得clone一下。然而，这只是针对页面里的，如果要从页面外拖入元素，可就有点犯难了。现在有了H5，这也就是浮云一般的事情了。

前段时间开发一个从桌面拖入图片或文件，进行上传识别的功能，刚好用到这些事件，小结一下。依然奉上注释加伪代码吧：