vue3 实现拖动一个div 到指定容器内 对应的图片从原处转移到另一个指定的容器内

可以使用 Vue3 自带的拖放事件来实现该功能。我们可以在拖动的 div 上绑定 `draggable` 属性，并监听 `dragstart` 和 `dragend` 事件。在指定容器内，我们需要监听 `dragover` 和 `drop` 事件。

下面是一个简单的示例：

<template>
  <div class="container">
    <div class="draggable" draggable="true" @dragstart="onDragStart" @dragend="onDragEnd">
      拖动我
    </div>
    <div class="target" @dragover.prevent @drop="onDrop">
      放到这里
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onDragStart(event) {
      // 设置数据和效果
      event.dataTransfer.setData('text/plain', '拖动的数据');
      event.dataTransfer.effectAllowed = 'move';
    },
    onDragEnd(event) {
      // 拖动结束时的处理
    },
    onDrop(event) {
      // 获取拖动的数据
      const data = event.dataTransfer.getData('text/plain');
      // 在目标容器中添加元素
      event.target.appendChild(this.$refs.draggable);
    },
  },
};
</script>

<style>
.container {
  display: flex;
}

.draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  cursor: move;
}

.target {
  width: 200px;
  height: 200px;
  background-color: #eee;
}
</style>

在上面的示例中，我们在拖动的 div 上绑定了 `draggable` 属性，并监听了 `dragstart` 和 `dragend` 事件。在 `dragstart` 事件中，我们设置了拖动的数据和效果。在 `dragend` 事件中，我们可以进行拖动结束时的处理。

在目标容器上，我们监听了 `dragover` 和 `drop` 事件。在 `dragover` 事件中，我们阻止了默认行为，以允许元素可以被放置到该容器中。在 `drop` 事件中，我们获取拖动的数据，并在目标容器中添加元素。

请注意，在 `drop` 事件中，我们通过 `this.$refs.draggable` 获取到当前拖动的元素，并将其添加到目标容器中。为了使 `$refs` 生效，我们需要在拖动的元素上添加 `ref` 属性，如下所示：

<div class="draggable" draggable="true" @dragstart="onDragStart" @dragend="onDragEnd" ref="draggable">
  拖动我
</div>