有这样一个列表:vue
须要拖动列表,改变顺序,并把新的顺序保存下来传给后端。git
实现实现方法以下:github
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,spa
经过这个组件提供的方法,就能同时获取newIndex和oldIndex;code
其余方法:拖拽前、后 都遍历下这个列表,应该也能拿到列表中元素的排序(该方法何尝试)cdn