热点在线丨sortablejs 列表拖拽排序，js vue2,解决拖拽排序乱序问题

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

热点在线丨sortablejs 列表拖拽排序，js vue2,解决拖拽排序乱序问题

2023-01-11 18:09:34 来源：博客园

(资料图片仅供参考)

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

实现; 运用js中的sortablejs库

环境：vue2

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

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

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

方法;

1 安装依赖

npm install sortablejs --save

2 引入

引入到相应的文件中

import Sortable from "sortablejs";

3 方法代码

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

             
    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();}

关键词：容易出现初始位置