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无效的状况下，不会触发拖拽事件的。暂时还未找到相关文档。求真相