vue 拖拽容器互换位置

实现 Vue 拖拽容器互换位置，可以使用 Vue.Draggable 插件。这个插件可以让你轻松实现拖拽排序，包括拖拽容器互换位置。以下是一个简单的示例：

1. 安装 Vue.Draggable 插件：

npm install vuedraggable

2. 在 Vue 组件中引入并注册 Vue.Draggable：

import draggable from 'vuedraggable'
  
export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: '容器1' },
        { id: 2, name: '容器2' },
        { id: 3, name: '容器3' },
        { id: 4, name: '容器4' },
      ]
    }
  }
}

3. 使用 Vue.Draggable 在模板中渲染容器列表：

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

注意：`v-model` 指令绑定了列表数据 `list`，而 `options` 属性设置了容器的分组，这是实现互换位置的关键。

现在，你可以通过拖拽容器来互换它们的位置了。