当前位置: 首页>前端>正文

Vue Element表格实现拖拽排序 elementui 列表拖拽排序

关于拖拽排序

这个功能常见于手机端,例如,支付宝选择优先付款…
在做公司新项目的时候,提的新需求,原本定义的是点击箭头对列表进行排序,后来更改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
    })
  }
})



https://www.xamrdz.com/web/2ap1935934.html

相关文章: