vue3 - 在使用 vue-draggable-next的时候，如何获取到拖动过程中，拖到了哪个元素上？

Question

在使用 vue-draggable-next的时候，如何获取到拖动过程中，拖到了哪个元素上？

问题是这样的，我有两个组件，通过一个父组件进行挂载，左侧的drag组件可以拖入到右侧组件，右侧组件有两个draggable的div。我想分别拖入到不同的div中，现在的问题是无法知道我到底拖到了哪个div元素上，导致数据添加不正确，如何解决这个问题？尝试过 add、move事件，但是move事件获取到的是当前元素的div，拿不到右侧组件的div。

Answer 1

在 vue-draggable-next 中，你可以使用 end 事件来捕获拖动结束时目标元素的信息。end 事件会提供一个对象，其中包含了关于拖动操作的各种信息，如源元素、目标元素等。

要获取拖动过程中目标元素的信息，你可以使用 end 事件的 related 属性。这个属性会提供关于目标元素的信息，包括其索引和 DOM 元素。

以下是一个示例代码，演示了如何在 vue-draggable-next 中使用 end 事件来获取目标元素的信息：

<template>  <div>    <div>      <Draggable v-model="list1" @end="onDragEnd">        <div v-for="(item, index) in list1" :key="item.id">          {{ item.name }}        </div>      </Draggable>    </div>    <div>      <Draggable v-model="list2" group="people">        <div v-for="(item, index) in list2" :key="item.id" class="target-div">          {{ item.name }}        </div>      </Draggable>    </div>  </div></template><script>import { Draggable } from 'vue-draggable-next';export default {  components: {    Draggable,  },  data() {    return {      list1: [        { id: 1, name: 'Item 1' },        { id: 2, name: 'Item 2' },        // ...      ],      list2: [        { id: 3, name: 'Target 1' },        { id: 4, name: 'Target 2' },        // ...      ],    };  },  methods: {    onDragEnd(event) {      const { related } = event;      if (related) {        console.log('Target element:', related.element); // 目标元素的 DOM 节点        console.log('Target element index:', related.index); // 目标元素在列表中的索引      }    },  },};</script><style>.target-div {  border: 1px solid #ccc;  margin-bottom: 10px;  padding: 10px;}</style>

在上面的示例中，我们有两个 Draggable 组件，一个用于拖动元素（list1），另一个用于放置目标元素（list2）。当拖动结束时，onDragEnd 方法会被调用，并接收到一个包含有关拖动操作信息的事件对象。通过访问 related 属性，我们可以获取到目标元素的信息，包括其 DOM 节点和在列表中的索引。这样，你就可以根据这些信息来决定如何将数据添加到正确的目标元素中。