使用vue3-smooth-dnd组件实现获取拖拽进容器内时获取目标容器的信息

Vue3-smooth-dnd是一个用于实现平滑拖放功能的库，它可以帮助你在Vue应用中轻松处理拖拽操作。当你通过这个组件将元素从一处拖放到另一处，比如拖入一个特定的容器（target container），你可以利用`onDrop`或`ondragenter`这类事件处理器来获取目标容器的相关信息。

例如，在`mounted()`或`updated()`钩子里，你可以设置这样的事件监听：

<template>
  <smooth-dnd :ref="draggableRef" @drop="handleDrop">
    <!-- your draggable elements -->
  </smooth-dnd>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import SmoothDnd from 'vue3-smooth-dnd';

const draggableRef = ref(null);
const targetInfo = ref({});

function handleDrop(event) {
  const targetElement = event.target; // 获取到被放置的元素
  if (targetElement && targetElement.dataset.containerId) { // 如果有containerId属性
    targetInfo.value = {
      id: targetElement.dataset.containerId,
      name: targetElement.dataset.containerName, // 或者其他你需要的信息
      ...// 可能还包括位置等其他数据
    };
  }
}
onMounted(() => {
  draggableRef.value.addEventListener('drop', handleDrop);
});
</script>

在这个例子中，`handleDrop`函数会在元素成功拖放到容器时被触发，此时你可以访问到目标元素以及它的容器标识或其他附加的数据。