vuedraggable互相拖拽

vuedraggable是一个基于Vue.js的拖拽排序库，它允许你在Vue应用中实现元素的拖拽和排序功能。为了实现互相拖拽，你可以使用v-model指令来绑定一个数组，然后使用v-for指令来循环渲染数组中的每个元素。

以下是一个简单的示例代码，展示了如何使用vuedraggable实现互相拖拽：

<template>
  <div>
    <draggable v-model="list" :options="dragOptions">
      <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' },
      ],
      dragOptions: {
        animation: 200,
      },
    };
  },
};
</script>

在上面的代码中，我们使用v-model指令将`list`数组与`draggable`组件进行绑定，这样每次拖拽操作都会更新`list`数组的顺序。通过循环渲染`list`数组中的每个元素，我们可以实现互相拖拽的效果。