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])
}
}
