sortablejs 列表拖拽排序，js vue2,解决拖拽排序乱序问题

功能：在列表中，需要给列表进行拖拽排序，并实时保存拖拽后的列表书序

实现; 运用js中的sortablejs库

环境 ：vue2

中文网：http://www.sortablejs.com

在首页中下拉可以看到有多个示例，方便上手

在配置项中会对属性、方法进行解析，方便理解

 

 

 

方法;

1  安装依赖

npm install sortablejs --save

　　

2  引入

引入到相应的文件中

import Sortable from "sortablejs";

3 方法代码

在vue2的文件中编写代码如下，div部分仅展示部分，重点关注拖拽排序方法，可以解决拖拽乱序问题，注意要分步骤写，两个splice一起写的话容易出现乱序问题

<div class="class-editor" ref="methods" v-bind:class="{'advanced':isAdvancedModeActive}">
     <div class="v-method" v-bind:class="{'active':isaaacctt, 'method-sortable': isMethodSortable}" v-on:click="activateMethod">
    
    </div>
</div>    


methods: {
    initSort() {
      new Sortable(this.$refs.methods, {//methods整个列表
        draggable: ".method-sortable",//这个类名区域的才能进行拖拽
        onEnd: (event) => {//event拖拽元素
          const oldIndex = event.oldIndex; //初始位置
          const newIndex = event.newIndex; //拖拽后的位置

              //拖拽排序方法 这个不会出现乱序问题
          var source = this.model.methods[oldIndex]
          this.model.methods.splice(oldIndex, 1)
          this.model.methods.splice(newIndex, 0, source);
          
          this.update("methodList", this.model.methods.map((m) => m.toJSON())); //更新列表
        },
      });
    },
},


mounted(){
   this.initSort();
}