使用vue3-smooth-dnd组件实现获取拖拽进容器内时的物体信息和容器信息代码实现

Vue3-smooth-dnd是一个用于创建拖放功能的库，它可以帮助你在Vue应用程序中轻松实现元素的拖放交互。下面是一个简单的示例，展示如何使用这个组件在拖拽元素到容器时获取物体（drag item）和容器的信息：

首先，你需要安装`vue3-smooth-dnd`，如果还没有安装，可以使用npm或yarn添加：

npm install vue3-smooth-dnd
# 或者
yarn add vue3-smooth-dnd

然后，在你的Vue组件中引入并使用它：

<template>
  <div ref="container" :smooth-drag="dragHandler" :smooth-drop="dropHandler">
    <div v-for="(item, index) in items" :key="index" draggable :data="item" class="draggable">{{ item.name }}</div>
  </div>
</template>

<script>
import { useDrag, useDrop } from 'vue3-smooth-dnd';

export default {
  setup() {
    const items = [
      // ... your list of objects with a name property
    ];

    // 使用useDrag创建可拖动的项
    const dragItem = useDrag(() => ({
      group: 'items',
      data: ({ id }) => ({ id }),
    }));

    // 使用useDrop处理目标区域
    const dropArea = useDrop({
      accept: 'items', // 接受哪一类
      drop(item) {
        this.handleDrop(item.data.id);
      },
      onDropEnd: () => {
        // 提供回调以在拖放结束时做其他操作
      },
    });

    // 拖放事件处理器
    const dragHandler = (e) => {
      dragItem.start(e);
    };

    // 将物品放入容器的处理器
    const dropHandler = (e, { added }) => {
      if (added) {
        console.log('Dropped item:', e.item.data); // 获取拖入的对象信息
        console.log('Container info:', this.$refs.container.dataset); // 获取容器元数据
      }
    };

    return {
      items,
      dragHandler,
      dropHandler,
    };
  },
};
</script>

在这个例子中，我们创建了一个可拖动的列表，并将它们放在一个可以接受拖放的区域内。当一个项目被拖放到容器时，`dropHandler`会被调用，你可以从`e.item.data`获取拖入的具体对象信息，而`this.$refs.container.dataset`则可以获取容器的一些额外元数据。