参考文章：【HTML5–拖放事件与dataTransfer对象】

拖放事件

拖放的过程中被拖放的对象被称为源对象
拖放过程中经过的其他对象被称为过程对象
最终到达的对象被称为目标对象

  • 源对象
    • dragstart： 源对象开始拖放，开始移动时事件触发
    • drag： 源对象拖放过程中，移动被拖拽对象时触发
    • dragend: 源对象拖放结束，整个拖放操作结束时触发
  • 过程对象
    • dragenter ： 源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
    • dragover： 源对象在过程对象范围内移动时触发
    • dragleave： 源对象离开过程对象的范围，被拖拽对象离开目标对象时触发
  • 目标对象
    • drop： 源对象拖放到目标对象，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发