vue draggable

Vue Draggable是一个Vue.js的组件，实现了拖放排序和拖放组件的功能。它基于Sortable.js库，可以轻松地将其集成到Vue.js应用程序中。

使用Vue Draggable，您可以创建可拖动的列表、表格、树形结构、甚至是整个视图。它还支持多项选择和拖动时的动画效果，使用户体验更加流畅。

要使用Vue Draggable，您需要在您的Vue.js应用程序中安装和导入它。然后，您可以使用它的Vue组件来创建可拖动的元素。例如，以下是一个简单的示例：

<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' }
        ]
      }
    }
  }
</script>

在这个例子中，我们创建了一个`draggable`组件，并将我们的列表数据绑定到它的`v-model`属性上。然后，我们使用`v-for`指令来循环遍历列表，并创建可拖动的元素。每个元素都有一个唯一的`key`属性，以便Vue可以正确地渲染它们。

这只是Vue Draggable的一个简单示例，它还有许多其他功能和选项可供使用。您可以查看官方文档以了解更多信息：https://github.com/SortableJS/Vue.Draggable