vue draggable 事件

Vue Draggable事件包括ondragenter、ondragover、ondragleave和ondrop。这些事件可用于实现在Vue中拖拽元素的功能。

- ondragenter：当被拖动的元素进入目标区域时触发。
- ondragover：当被拖动的元素在目标区域内移动时触发。
- ondragleave：当被拖动的元素离开目标区域时触发。
- ondrop：当释放鼠标时触发。

在Vue中，我们可以通过在HTML元素上绑定对应的事件来使用这些事件。

例如，在使用Vue Draggable实现可拖拽的功能时，可以在目标区域的HTML元素上绑定@dragenter、@dragover、@dragleave和@drop事件，并在Vue实例中定义对应的方法来处理这些事件。

示例代码如下：

<div class="box" @dragenter="dragEnter" @dragover="dragOver" @dragleave="dragLeave" @drop="drop">
  <el-tag v-for="(tag, index) in targetList">{{tag.name}}</el-tag>
</div>

<div>
  <el-tag type="success" effect="dark" style="margin-right: 6px;" v-for="(item, idx) in list" :key="idx" draggable="true" @dragstart.native="dragStart">{{item.name}}</el-tag>
</div>

在Vue实例中，定义相应的方法来处理这些事件：

methods: {
  dragEnter(event) {
    // 处理拖动元素进入目标区域的逻辑
  },
  dragOver(event) {
    // 处理拖动元素在目标区域内移动的逻辑
  },
  dragLeave(event) {
    // 处理拖动元素离开目标区域的逻辑
  },
  drop(event) {
    // 处理释放鼠标时的逻辑
  }
}

通过使用这些事件和对应的方法，我们可以实现在Vue中拖拽元素的功能。

参考资料:
：引用自文献
：引用自文献