vue实现div内元素拖拽 元素互换位置

要实现div内元素拖拽，可以使用vue-draggable插件。该插件提供了一个可拖拽的列表组件，支持拖拽排序、拖拽复制等功能。

下面是一个简单的示例：

1. 安装vue-draggable插件

npm install vuedraggable --save

2. 在组件中使用vuedraggable组件

<template>
  <div>
    <draggable v-model="list">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    }
  }
}
</script>

在上面的示例中，我们使用了vuedraggable组件，并将列表数据绑定到v-model中。列表中的每个元素都被包装在一个div中，并使用v-for指令进行渲染。

3. 实现元素互换位置

要实现元素互换位置，我们需要在vuedraggable组件上添加一个属性：`swap`。该属性指定一个函数，用于交换两个元素的位置。

<template>
  <div>
    <draggable v-model="list" :swap="swap">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    }
  },
  methods: {
    swap(event) {
      const draggedIndex = event.draggedContext.index
      const targetIndex = event.relatedContext.index
      const temp = this.list[draggedIndex]
      this.list.splice(draggedIndex, 1)
      this.list.splice(targetIndex, 0, temp)
    }
  }
}
</script>

在上面的示例中，我们定义了一个名为`swap`的函数，该函数接收一个事件对象作为参数。事件对象包含拖拽的元素索引、目标元素索引等信息。我们可以根据这些信息来实现元素的互换位置。

具体实现中，我们首先获取被拖拽元素的索引`draggedIndex`和目标元素的索引`targetIndex`，然后使用数组的splice方法将被拖拽元素从列表中删除，并插入到目标元素的前面。

通过以上的步骤，我们就可以轻松地实现div内元素的拖拽和互换位置了。