拖拽元素到目标区域的事件

Question

关于拖拽到目标区域的事件中，既然 dragover 和 dragenter 的效果是一样的，为什么还要写两个呢？是有什么历史原因吗？

<div
  class="drop"
  @drop.stop.prevent="handleDrop"
  @dragover.stop.prevent="handleDragover"
  @dragenter.stop.prevent="handleDragover"
>
  <i class="el-icon-upload" />
  <span>{{ $t('msg.uploadExcel.drop') }}</span>
</div>

Answer 1

Sunday 2022-08-04 14:41:31

你好

因为 dragenter 表示拖拽移入，dragover 表示拖拽到（会持续触发），我们需要在这两个事件中都执行 阻止冒泡和   防止默认行为操作

• 提问者 qq_木杉木_03622742 #1

  老师好！
  我是不是可以理解成。dragenter 是移入瞬间完成的动作，dragover 是拖拽文件在可上传范围内持续不松开鼠标时的动作？

• Sunday 回复 提问者 qq_木杉木_03622742 #2

  是的。可以这么理解