在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事件。
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
