vuedraggable

VueDraggable是一个Vue.js的插件，它提供了一个可拖动的组件列表，可以轻松实现拖放排序的功能。它支持多种排序方式和事件回调，可以很方便地集成到Vue.js应用程序中。VueDraggable的使用方法非常简单，只需要在Vue.js组件中引入并注册该插件，然后在模板中使用VueDraggable组件标签即可。例如，可以使用以下代码创建一个简单的可拖拽的组件列表：

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

<script>
import draggable from 'vuedraggable'

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

这里使用v-model绑定了一个数组list，并将该数组中的每个元素渲染为一个可拖拽的div元素。用户可以通过拖拽这些元素来改变它们在列表中的位置。当用户拖动元素时，VueDraggable会自动更新list数组中元素的顺序。此外，VueDraggable还提供了一些其他属性和事件，可以根据需要进行配置和使用。