HTML5拖拽事件笔记

在HTML5的规范中，我们可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

1. 拖拽元素：设置了`draggable="true"`的元素

当拖动某元素时，将依次触发下列事件：

1. dragstart（按下鼠标并开始移动鼠标时，会在被拖放的元素上触发dragstart事件）

2. drag（触发dragstart事件后，随即会触发drag时间，而且在元素被拖动器件会持续触发该事件）

3. dragend（当拖动停止时，无论是否把元素放到了有效的放置目标上，会触发dragend事件）

2. 目标元素：页面中的任何一个元素都可以成为目标元素

当某个元素倍拖动到一个有效的目标上时，下列事件会依次发生：

1. dragenter（只要有元素倍拖放到目标上，就会触发dragenter事件）

2. dragover（dragenter被触发后紧接着触发dragover事件，在被拖动目标一直在目标范围内时，dragover事件会持续被触发）

3. dragleave或drop（如果元素被拖出了放置目标，dragover事件不再触发，但会触发dragleave事件；如果元素被放到了目标元素中，则触发drop事件而不是dragleave事件）

3. 自定义目标元素

虽然所有的元素都支持放置目标事件，但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论永辉如何操作，都不会触发drop事件。

如果需要设置允许放置，我们必须阻止对元素的默认处理方式：

这要通过调用 dragover 事件的 event.preventDefault() 方法来阻止默认事件发生，即改变目标元素不允许放置属性，这时，当元素在目标元素上被鼠标释放时，就会触发drop事件。