vue3 实现拖动元素 到指定容器内 然后可以拖回原来位置

你可以使用 Vue3 内置的 `draggable` 指令来实现拖动元素，并且结合 `droppable` 指令来实现拖动元素到指定容器内。

以下是一个简单的示例：

<template>
  <div class="container">
    <div class="drag-area" v-draggable>
      Drag me!
    </div>
    <div class="drop-area" v-droppable>
      Drop here!
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      mounted(el) {
        let isDragging = false;
        let originalX, originalY;
        
        el.addEventListener("mousedown", function(event) {
          isDragging = true;
          originalX = event.clientX;
          originalY = event.clientY;
          
          el.style.cursor = "grabbing";
        });
        
        el.addEventListener("mousemove", function(event) {
          if (isDragging) {
            const deltaX = event.clientX - originalX;
            const deltaY = event.clientY - originalY;
            
            el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
          }
        });
        
        el.addEventListener("mouseup", function() {
          isDragging = false;
          
          el.style.cursor = "grab";
          el.style.transform = "";
        });
      }
    },
    droppable: {
      mounted(el) {
        el.addEventListener("dragover", function(event) {
          event.preventDefault();
          el.style.backgroundColor = "yellow";
        });
        
        el.addEventListener("dragleave", function() {
          el.style.backgroundColor = "";
        });
        
        el.addEventListener("drop", function(event) {
          event.preventDefault();
          
          const draggedElement = document.querySelector(".drag-area");
          el.appendChild(draggedElement);
          
          el.style.backgroundColor = "";
        });
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.drag-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #efefef;
  border: 1px solid #ccc;
  cursor: grab;
}

.drop-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #eee;
  border: 1px dashed #ccc;
}
</style>

在上面的代码中，我们定义了两个指令 `v-draggable` 和 `v-droppable`，分别用于实现元素的拖动和容器的放置。在 `v-draggable` 指令中，我们监听鼠标事件来实现元素的拖动，同时设置了 `cursor` 样式来改变鼠标指针的形状。在 `v-droppable` 指令中，我们监听了三个事件来实现容器的放置：`dragover`、`dragleave` 和 `drop`。其中 `dragover` 和 `dragleave` 用于设置容器的背景颜色，以提示用户当前的操作状态；`drop` 事件中我们将拖动元素添加到容器中，并清除容器的背景颜色。

注意：以上示例只是一个简单的实现，还有很多细节需要考虑，比如拖动元素时的边界限制、容器内元素的排序等问题。如果需要更复杂的功能，建议使用第三方库来实现，比如 `vuedraggable`。