移动端上下拖动调整顺序效果_vue上下移动排序

最近做的项目上有一个排序功能

图片.png

以前就很少用js的sort，正好可以补补了

先说说sort方法

直接用 arr.sort()是按照ASCII码排序 大家可以看看文档

他还可以加参数 来自定义排序

function sortNumber(a,b)

{

return a - b

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

document.write(arr + "
")

document.write(arr.sort(sortNumber))

通过方法的返回值来判断两个数的位置关系

结果

10,5,40,25,1000,1

1,5,10,25,40,1000

所以这个排序的步骤大致是这样

1.获得点击对象，交换位置的对象

2.得到对象的seq，然后交换

3.调用自定义sort方法排序，重新赋值给this.tableData

这里只演示上移方法

data(){

tableData: [{name:'测试1',seq:1},{name:'测试1',seq:2},{name:'测试1',seq:3}]

}

methods: {

let currentObj = this.tableData[seq - 1]

let currentSeq = currentObj.seq

let changeObj = this.tableData[seq - 2]

let changeSeq = changeObj.seq

currentObj.seq = changeSeq //交换赋值

changeObj.seq = currentSeq //交换赋值

this.tableData.sort(count.sort('seq')) //重新渲染

}

这个count.sort是一个自定义方法。在我的count.js中

prop是需要排序的属性

PS：后台给的数据可能是字符串，比较时会出问题。需要转一下

这段代码来自

https://www.cnblogs.com/xljzlw/p/3694861.html#undefined

let count = {

sort: function (prop) {

return function (obj1, obj2) {

var val1 = obj1[prop]

var val2 = obj2[prop]

if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {

val1 = Number(val1)

val2 = Number(val2)

}

if (val1 < val2) {

return -1

} else if (val1 > val2) {

return 1

} else {

return 0

}

}

}

}

export default count