功能:在列表中,需要给列表进行拖拽排序,并实时保存拖拽后的列表书序
实现; 运用js中的sortablejs库
环境 :vue2
在首页中下拉可以看到有多个示例,方便上手
在配置项中会对属性、方法进行解析,方便理解
方法;
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(); }
标签:methods,列表,sortablejs,排序,拖拽,乱序 From: https://www.cnblogs.com/sinberya/p/17044493.html