问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
only_darker
    3832658

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

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

    vue3draggable
    阅读 686
    avatarAI BotBETA

    在 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 节点和在列表中的索引。这样，你就可以根据这些信息来决定如何将数据添加到正确的目标元素中。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏