vue2拖拽排序使用sortble.js

Vue2中使用sortble.js进行拖拽排序是一个常见的功能需求，它可以帮助我们在前端构建响应式的列表排序。sortble.js是一款轻量级的JavaScript库，专门用于处理元素的拖放操作，尤其是基于HTML5 Drag and Drop API的排序。

在Vue应用中，你可以按照以下步骤集成和使用sortble.js：

1. **安装库**：
首先，在项目中安装sortble.js，可以使用npm或yarn：

   npm install sortablejs
   # 或者
   yarn add sortablejs

2. **引入并配置**：
在Vue组件中，导入sortble.js，并在需要排序的列表上应用其API：

   import Sortable from 'sortablejs';

   export default {
     data() {
       return {
         items: ['Item1', 'Item2', 'Item3'], // 初始化的数据数组
       };
     },
     mounted() {
       this.itemsSortable = Sortable.create(this.$refs.container, {
         group: '__items__', // 给元素分组以便拖放到其他容器
         draggable: '.draggable', // 只允许有特定class的元素被拖动
         onEnd: (evt) => { // 拖放结束后触发事件
           console.log('排序已结束:', evt.newIndex);
           // 更新数据顺序
           this.items = this.items.slice(0, evt.newIndex)
               .concat(this.items.slice(evt.newIndex));
         }
       });
     },
   };

这里`$refs.container`是你想排序的列表的HTML元素引用。

3. **模板绑定**：
在HTML模板中，给每个列表项添加draggable属性和可能的额外样式：

   <ul ref="container" class="list">
     <li v-for="(item, index) in items" :key="index" class="draggable">{{ item }}</li>
   </ul>