点击复制元素内容拖拽至另一元素中 vue3

在Vue 3中实现点击复制元素内容并将其拖拽到另一个元素中，你可以使用Vue的指令和处理程序。以下是一个示例代码：

HTML:

<div v-draggable>源元素</div>
<div v-droppable>目标元素</div>

JavaScript (Vue 3):

import { createApp } from 'vue';

const app = createApp({});

app.directive('draggable', {
  mounted(el) {
    el.addEventListener('mousedown', handleMouseDown);
  }
});

app.directive('droppable', {
  mounted(el) {
    el.addEventListener('dragover', handleDragOver);
    el.addEventListener('drop', handleDrop);
  }
});

function handleMouseDown(event) {
  event.dataTransfer.setData('text/plain', event.target.innerText);
}

function handleDragOver(event) {
  event.preventDefault();
}

function handleDrop(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  const nodeCopy = document.createElement('div');
  nodeCopy.innerText = data;
  event.target.appendChild(nodeCopy);
}

app.mount('#app');

在这个示例中，我们创建了两个自定义指令 `draggable` 和 `droppable`。`draggable` 指令在元素挂载时绑定了一个 `mousedown` 事件处理程序，用于设置拖动时传输的数据。`droppable` 指令在元素挂载时绑定了 `dragover` 和 `drop` 事件处理程序，分别用于阻止默认的拖放行为和处理元素被放置的操作。

注意，我们使用原生的 `addEventListener` 方法来绑定事件处理程序，因为在Vue 3中，自定义指令的钩子函数中的 `this` 指向的是指令对象，而不是元素本身。

这样，当你点击源元素并将其拖动到目标元素上时，源元素的内容会被复制到目标元素中。记得将元素的内容和指令应用到你的实际代码中。