dragstart drag dragend dragenter dragover dragleave drop

dragstart drag dragend dragenter dragover dragleave drop

 

前端框架层出不穷，网页上的效果越来越绚丽，制作绚丽的效果的成本越来越低，其中有种拖拽的效果是十分常见并且实用的。

其实手机上的使用已经非常频繁，举个例子，用手指选中一张图片，然后将图片拖到回收站，这就是一个完整的拖拽过程。细分一下，大致可以分为如下几个步骤：

首先，选中目标；然后拖动目标；最后在指定区域释放目标。

在javascript中有专门为这个过程设置的事件， 如果这种方式能够得到普及的话（兼容性问题不大，IE都兼容），就可以替换到老旧的修改元素位置的方式实现拖动的方式。这样做显而易见的好处就是，老方法一般需要将元素设置为绝对定位（absolute）然后将鼠标的偏移同步到被拖放元素；其次，老方法需要使用javascript高密度的修改DOM，效率低。

 

拖动过程需要从两个角度分解这个动作，可以想象这么一个场景，我们在地上划出一个范围，需要将桌子抬进去。

对于被拖动的桌子，需要拽住桌子，然后拖动，最后放下，在javascript对应的就是dragstart/drag/dragend（如果直接作为属性写，需要在开头加一个on）；对于目标区域来说，桌子有个进入区域的状态，然后停留在上方的过程，最后是放到上面的状态，那对应的是dragenter/dragover/drop，当然，如果桌子抬进去,在没放下的情况下又抬出来，那会触发“抬离”的事件--dragleave。 拖动过程中，dragenter/dragover/dragleave/drop会发生在拖动轨迹经过的任意元素身上。当然，假设目标区域是元素B，被拖动的是元素A，那么给B绑定的事件，只有A被拖入B的时候才会执行（fire/dispatch）。当然，大部分高级浏览器都会对图片或者链接的dragend时刻有兴趣。

如果不希望在拖动网页上的图片时，浏览器默认打开新窗口的话，需要对dragstart开刀，通过在dragstart事件函数中return false，就可以达到这一目的。

拖动过程中，拖动的内容是什么，我们也许会感兴趣，那么dataTransfer显得尤为重要（将文件直接从电脑的文件系统中拽到浏览器中也可以通过它实现）。

 

http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_3.htm 这个demo可以将流程看的较为清晰。

文中的被拖动元素是指source element, 目标区域是指target element，不准确，可以适当转换一下。

ondragstart:

执行拖动操作时候，发生在被拖动的元素（或者一段文字）上，也是最拖动过程中第一个触发的事件。

如果一些文本被选中，可以通过拖拽选中区域，在目标区域松手就可以；默认情况下，目标区域可以是一个可编辑元素（textarea/input），处于可编辑模式下的元素/an element in editable mode---<div contenteditable="true">，或者是设计模式下的文档/document in design mode。关于contentEditable和design mode的区别，可以参考这里。

ondrag：

被拖动元素在拖动期间会定时的触发这一事件，即使没有移到目标区域。

ondragend：

被拖动元素被“放下”的时候发生在其身上的事件。

ondragenter：

这是目标区域（元素）dragover的开端，只有鼠标移入了，才会有悬浮的事件dragover。

ondragover：

和ondrag有点类似，也是高频率触发的事件，但是发生在目标区域，且发生在dragenter之后，dragleave之前。

ondragleave：

和ondragenter刚好相反，结束dragover。

ondrop：

被拖动元素被“放置”在目标区域的时候，也就是拖拽结束的时候，发生在目标区域的事件。

 

在实践的过程中，发现在Chrome中，如果img没有src或者src无效的情况下，不会触发拖拽事件的。暂时还未找到相关文档。求真相