使用draggable实现拖拽，并携带参数

在原生Js中实现

要实现拖放和携带数据，需要使用HTML5的Drag and Drop API。首先，在拖动的元素上设置draggable属性为true：

<divdraggable="true">拖动我</div>

然后，在目标元素上设置ondragover和ondrop事件处理程序，以便在元素拖动到目标区域时触发：

<divondragover="allowDrop(event)"ondrop="drop(event)">放置区域</div>

接下来，在拖动元素上设置ondragstart事件处理程序，以便在开始拖动时设置数据：

<divdraggable="true"ondragstart="drag(event)">拖动我</div>

在drag事件处理程序中，可以调用setData方法设置要传递的数据类型和值：

functiondrag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

在drop事件处理程序中，可以调用getData方法获取传递的数据类型和值：

functiondrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

为了在元素被拖放后消失，可以在drop事件处理程序中使用removeChild方法将元素从DOM中删除：

functiondrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var draggedElement = document.getElementById(data);
  ev.target.appendChild(draggedElement);
  draggedElement.parentNode.removeChild(draggedElement);
}

这样，当拖动元素被放置到目标区域时，它将被移动到该区域并从原位置删除，并且可以通过getData方法获取传递的数据。

在vue中实现

在Vue中实现拖放和携带数据的方式与原生JavaScript的方式类似，但需要结合Vue的语法和事件处理方式。以下是一个简单的示例：

<template><div><divclass="drag"v-for="item in items":key="item.id":draggable="true" @dragstart="dragStart(item, $event)">
      {{ item.text }}
    </div><divclass="drop" @dragover.prevent @drop="drop($event)">
      放置区域
    </div></div></template><script>exportdefault {
  data() {
    return {
      items: [
        { id: 1, text: '拖动我' },
        { id: 2, text: '再拖动我' },
        { id: 3, text: '再再拖动我' },
      ],
    };
  },
  methods: {
    dragStart(item, event) {
      event.dataTransfer.setData('text/plain', item.id);
    },
    drop(event) {
      event.preventDefault();
      const itemId = event.dataTransfer.getData('text/plain');
      const draggedItem = this.items.find((item) => item.id === Number(itemId));
      const index = this.items.indexOf(draggedItem);
      this.items.splice(index, 1);
    },
  },
};
</script>

在上面的示例中，我们使用v-for指令将items数组中的每个元素渲染为一个可拖动的div元素，并在dragstart事件处理程序中设置要传递的数据类型和值。我们还在放置区域的div元素上设置了dragover和drop事件处理程序，以便在元素拖动到目标区域时触发，并在drop事件处理程序中获取传递的数据类型和值，并根据这些数据更新items数组，从而实现拖放和携带数据的功能。

需要注意的是，我们在dragover事件处理程序中调用了prevent方法来防止浏览器默认的拖放行为。此外，我们在拖放过程中没有直接删除元素，而是更新了items数组，这样可以更好地与Vue的响应式数据绑定机制配合使用，从而实现更高效的更新和渲染。