vue2拖拽排序的插件

Vue2中常用的拖拽排序插件有Sortable.js和vue-draggable。Sortable.js是一个功能强大的JavaScript库，用于创建可交互的列表，支持拖放、排序等功能。而vue-draggable则是一个轻量级的组件，它将Sortable.js的功能封装成了Vue组件，可以直接在Vue项目中方便地使用。

要在Vue2应用中使用拖拽排序插件，首先需要安装相应的依赖，比如：

npm install sortablejs @SortableJS/vue

然后在组件中导入并使用，例如Sortable.js:

<template>
  <div class="draggable">
    <ul v-sortable="options" :data="items">
      <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Sortable from '@SortableJS/vue';

export default {
  components: {
    Sortable,
  },
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
      ],
      options: {
        group: '__drag-group__', // 设置分组
        animation: 150, // 拖动动画时间
        onEnd: (event) => {
          console.log('排序结束', event.newIndex, event.oldIndex);
        },
      },
    };
  },
};
</script>

对于vue-draggable，用法类似，只需在文档中查找对应的API和配置即可。这两个插件都能提供丰富的事件和选项，方便开发者定制各种需求的拖拽排序场景。