通过拖动列表，重新获取列表的排序

发表于 阅读次数：

通过拖动列表，重新获取列表的排序。记录一下实现的思路和代码

有这样一个列表：

sort2.gif

需要拖动列表，改变顺序，并把新的顺序保存下来传给后端。

实现实现方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function arrSort(arr,oldIndex,newIndex){
  //  oldIndex是当前元素下标，newIndex是拖动到的位置下标。

  //如果当前元素在拖动目标位置的下方(即把该元素向上拖)，
  //先给数组中元素拖动到的地方（即索引为newIndex的位置）新增一个和当前拖动元素值一样的元素，
  //然后再把数组中之前的那个拖动的元素删除掉，因为前面插入了一个元素，所以数组长度要+1
  if(oldIndex > newIndex){
    arr.splice(newIndex,0,arr[oldIndex]);
    arr.splice(oldIndex+1,1)
  } else {
  //如果当前元素在拖动目标位置的上方(即把该元素向下拖)，
  //同样，给数组newIndex+1的地方新增一个和当前元素值一样的元素，
  //这时，将之前的那个拖动的元素删除掉，索引不变，还是oldIndex
    arr.splice(newIndex+1,0,arr[oldIndex]);
    arr.splice(oldIndex,1)
  }
}

最终总结就一句话：先在新的位置添加一个元素，然后再把原来的元素删掉！

至于如何获得 newIndex 和 oldIndex ？

我们项目使用的vue，这个拖拽用的一个库：Vue.Draggable，

通过这个组件提供的方法，就能同时获取newIndex和oldIndex；

其他方法：*++拖拽前、后 都遍历下这个列表，应该也能拿到列表中元素的排序++*（该方法未尝试）