vuedraggable自由拖拽

VueDraggable是一个基于Vue.js的可拖拽和排序列表的组件。它允许用户拖拽列表项以重新排序它们，也可以在不同的列表之间拖拽项。

使用VueDraggable，你可以轻松地实现自由拖拽功能，只需在Vue组件中引入它并按照文档中的说明进行设置即可。

下面是一个简单的示例代码，演示如何使用VueDraggable实现自由拖拽：

<template>
  <div>
    <h2>可拖拽列表</h2>
    <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: '列表项1' },
        { id: 2, name: '列表项2' },
        { id: 3, name: '列表项3' },
        { id: 4, name: '列表项4' }
      ]
    }
  }
}
</script>

在上面的代码中，我们引入了VueDraggable组件，并在组件中使用v-model指令将数据绑定到列表上。然后，我们使用v-for指令循环渲染每个列表项，并为每个列表项设置一个唯一的key值。这样就可以实现自由拖拽功能了。