vue 给拖拽组件添加拖拽互换功能

要实现拖拽组件的互换功能，可以通过以下步骤进行：

1. 给每个可拖拽组件添加一个唯一标识符，例如id。

2. 在拖拽开始时，记录被拖拽组件的id和其它需要的信息。

3. 在拖拽结束时，获取拖拽结束位置的组件id和其它需要的信息。

4. 如果被拖拽组件和拖拽结束位置的组件不是同一个组件，则进行位置互换。

5. 更新组件的位置信息，重新渲染组件。

以下是一个简单的实现代码示例：

<template>
  <div>
    <div class="draggable" v-for="item in items" :key="item.id"
      :draggable="true" @dragstart="dragStart(item)" @dragend="dragEnd">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '组件1' },
        { id: 2, name: '组件2' },
        { id: 3, name: '组件3' },
      ],
      draggingItem: null,
    };
  },
  methods: {
    dragStart(item) {
      this.draggingItem = item;
    },
    dragEnd(event) {
      const dropTarget = event.target;
      const dropItemId = dropTarget.getAttribute('data-id');
      if (dropItemId && this.draggingItem.id !== parseInt(dropItemId)) {
        const dropIndex = this.items.findIndex(item => item.id === parseInt(dropItemId));
        const dragIndex = this.items.findIndex(item => item.id === this.draggingItem.id);
        this.items.splice(dropIndex, 1, this.draggingItem);
        this.items.splice(dragIndex, 1, { ...this.items[dropIndex] });
      }
      this.draggingItem = null;
    },
  },
};
</script>

在上述代码中，我们给每个可拖拽组件添加了一个id属性，并在拖拽开始时记录了被拖拽组件的信息。在拖拽结束时，我们获取了拖拽结束位置的组件id，并判断是否需要进行位置互换。如果需要互换位置，则使用splice方法进行位置互换，并重新渲染组件。