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
}
}
})
}
数组排序，你可以直接调用javascript原生自带的sort()方法，比如下面的例子：// Array.prototype.sort() //原生自带的数组的排序方法；
var fruit = ['apples', 'bananas', 'Cherries'] //定义一个数组
fruit.sort()// ['Cherries', 'apples', 'bananas'] //按字母排序的结果
var scores = [1, 2, 10, 21] //定义一个数字排序，你发现其实还是按照字母序排列的
scores.sort()// [1, 10, 2, 21]
如果希望按照期望的数字排序。
scores.sort(function(a,b){return a-b})//这样的就可以了。结果为：21 10 2 1
var things = ['word', 'Word', '1 Word', '2 Words']
things.sort()// ['1 Word', '2 Words', 'Word', 'word']
// In Unicode, numbers come before upper case letters,
// which come before lower case letters.
取消排序是不可能的。你可以在生成列表的时候带上顺序号，然后重排，例<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])
}
}
