有這樣一個列表: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