vue+element-ui 表格/列表的拖拽排序 --- sortablejs 包

关于拖拽排序

这个功能常见于手机端，例如，支付宝选择优先付款…
在做公司新项目的时候，提的新需求，原本定义的是点击箭头对列表进行排序，后来更改UI式样的时候要求做成拖拽排序…
接下来简单介绍一个拖拽排序的包 sortablejs

简介：Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

一个功能强大的 JavaScript 拖拽库

中文官网： http://www.sortablejs.com/
GitHub：https://github.com/SortableJS/Sortable
中文文档：https://www.itxst.com/sortablejs/f7nqyvbn.html

sortablejs 库的特点：

1. 兼容性好
2. 简单
3. 原生
4. CSS框架兼容性
5. 零依赖
6. SPA支持良好

1. 下载

npm install sortablejs

2. 页面引入

import Sortable from 'sortablejs'

3. 使用

// 获取包裹拖拽列表的元素
const tbody = document.getElementById('projectList')
const that = this

const sortable = Sortable.create(tbody, {
  //设置方式一，直接设置组名
  group:'itxst'
  //设置方式，object，也可以通过自定义函数function实现复杂的逻辑
  group:{
    name:'itxst',//组名为itxst
    pull:true或false或 'clone'或array或function,//是否允许拖从当前组
    put:true或false或array或function,//是否允许拖入当前组
  }
  
  // 是否允许组内排序
  sort: true,
  
  // 延迟多久可以拖拽
  delay: 1000, 
  delayOnTouchOnly:true,
  
  // 动画，类似于过渡，可以是拖拽过程没有那么生硬
  animation: 300,
  
  // 把拖拽功能集中在列表项的某一个点上，不设置该属性，拖拽属性就默认加在列表项上
  // 在列表项的每一个地方都会触发拖拽
  // 注意：类名前面要加点 .
  handle:".move",
  
  // 过滤或忽略指定元素，类名添加在某个拖拽元素上，该元素不允许拖动，其他元素可拖动
  // 注意：类名前面要加点 .
  filter:".filter",
  
  // 获取排序后的数据，data-no 作为拖拽元素的自定义属性，获取的就是该属性值
  dataIdAttr: "data-no",
  
  // 自定义停靠位置样式
  ghostClass:"ghost",
  
  // 指定样式，设置指定样式类名的元素才允许被拖动
  draggable: "item",
  
  // 拖拽队象移动样式，可以设置处于拖拽状态的元素移动时的样式
  // 通过dragClass属性设置拖拽对象移动样式，需要注意的是css可能需要!important属性进行覆盖同时设置forceFallback: true禁用html5原生拖拽。
  dragClass: "drag",

  // 选中拖拽对象样式，当元素被选中时设置的样式
  chosenClass:"chosen",
  
  // 拖拽结束事件 
  onEnd: function (evt) {
    // 获取拖动后的排序
    var arr = sortable.toArray();

    // 拖拽数据到某个位置
    that.list.splice(evt.newIndex, 0, that.list.splice(evt.oldIndex, 1)[0])

    var sortList = that.list.slice(0)
    that.list = []
    // 防止获取不到最新数据，使用nextTick
    that.$nextTick(function () {
      // 把排序后的最新数据重新赋值给页面的数据源
      that.list = sortList
    })
  }
})