npm install vuedraggable --save
npm insall sortablejs --save
二、引入依赖
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
三、JS函数拖动改变顺序（数组）：
drag(){
let newArr=this.checkMaterial.join(',')
let el = document.getElementById('items')
//let sortable = Sortable.create(el)
let that=this
Sortable.create(el,{
group: newArr,
store: {
//获取初始的数组
get: function (sortable) {
// console.log(sortable.options.group.name)
let order = sessionStorage.getItem(sortable.options.group.name)
return order ? order.split(',') : []
},
//获取排序之后的数组
set: function (sortable) {
var order = sortable.toArray()
sessionStorage.setItem(sortable.options.group.name, order.join(','))
that.checkMaterial=order
}
}
})
}
取消排序是不可能的。你可以在生成列表的时候带上顺序号，然后重排，例<ul>
<li oid="1">content 1</li>
<li oid="2">content 2</li>
</ul>
function reset() {
var objs = []
var countObjs = $('ul>li').length
for (var i = 1i <= countObjsi++) {
objs.push($('ul>li[oid=' + i + ']'))
}
$('ul').empty()
for (var i = 0i <objs.lengthi ++) {
$('ul').append(objs[i])
}
}
sortable.js 官网
拖放排序插件Sortable.js中文介绍
1. 安装 npm 或 yarn 安装
2. 使用
效果：
3. 小结
事件：
onChoose ：function 列表单元被选中的回调函数
onStart ：function 列表单元拖动开始的回调函数
onEnd ：function 列表单元拖放结束后的回调函数
onAdd ：function 列表单元添加到本列表容器的回调函数
onUpdate ：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove ：function 列表元素移到另一个列表容器的回调函数
onFilter ：function 试图选中一个被filter过滤的列表单元的回调函数
onMove ：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone ：function 当创建一个列表单元副本的时候的回调函数
事件对象：
to ：HTMLElement--移动到列表容器
from ：HTMLElement--来源的列表容器
item ：HTMLElement--被移动的列表单元
clone ：HTMLElement--副本的列表单元
oldIndex ：number/undefined--在列表容器中的原序号
newIndex ：number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()
