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

1

文章首发在我的 个人博客

有这样一个列表:

sort2.gif

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

实现实现方法如下:

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;

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

你可能感兴趣的

不停的吃槟榔 · 6月28日

简单粗暴的方法:拖拽应该会返回一个新数组给你吧,然后foreach一个这个数据,将index值替换这个数据元素里面的#1 #2 值。

回复

载入中...