首页 > 其他分享 >sortablejs 列表拖拽排序,js vue2,解决拖拽排序乱序问题

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

时间:2023-01-11 17:44:36浏览次数:65  
标签:methods 列表 sortablejs 排序 拖拽 乱序

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

实现; 运用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();
}

  

 

标签:methods,列表,sortablejs,排序,拖拽,乱序
From: https://www.cnblogs.com/sinberya/p/17044493.html

相关文章

  • 算法基础——排序
    本文仅供个人记录、分享快速排序快排是经典的排序算法之一,其平均的时间复杂度为O(nlogn)模板:785.快速排序-AcWing题库#include<iostream>usingnamespacestd;......
  • vue el-date-picker多选日期时间时,支持时间排序
    需求背景:当el-date-picker可以多选日期时,时间的顺序是按照选择的顺序来的,体验不是很好。需要在选时间的同时进行时间排序 解决方案:使用watch监听v-model绑定的值的变......
  • 使用Stream流实现以List<Map<String, Object>>集合中Map的key值进行排序
    使用Stream流实现以List<Map<String,Object>>集合中Map的key值进行排序创建一个list存入数据List<Map<String,Object>>list=newArrayList<>();fo......
  • 【二分查找】LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置
    题目链接34.在排序数组中查找元素的第一个和最后一个位置思路转自:林小鹿的题解两套二分查找模板,分别用来查找左边界和右边界intbsearch_1(intl,intr){whil......
  • vue中实现图片拖拽
    <!--拖拽排序--><!--给外层容器添加vuedraggable这个标签--><vuedraggableclass="draggable-container"v-model="pram.i......
  • SSIS_数据流转换(行计数&派生列&排序)
    1.行计数转换行计数转换在行通过数据流时对行进行计数,并将最终计数结果存储在一个变量中。此转换有一个输入和一个输出。它不支持错误输出。行计数设置是在高级编辑器中设......
  • DRF之过滤,排序,自定义异常和分页
    DRF数据的过滤参考网址https://www.cnblogs.com/songhaixing/p/14687072.htmldrf内置的过滤组件SearchFilter###modelsclassBookInfo(models.Model):ti......
  • 后缀数组 I —— 后缀排序
    后缀数组(suffixarray)是省选字符串题目中非常重要的算法。本文将简略讲述其\(O(n\logn)\)求法,对于时间复杂度更优秀但notpractical的做法不作提及。模板考虑一种......
  • 4655. 重新排序
    4655.重新排序给定一个数组A和一些查询Li,Ri,求数组中第Li至第Ri个元素之和。小蓝觉得这个问题很无聊,于是他想重新排列一下数组,使得最终每个查询结果的和尽可能......
  • 数组排序
    /***数组元素交换位置*@param{array}arr数组*@param{number}index1添加项目的位置*@param{number}index2删除项目的位置*index1和index2分别是两个数组......