通過拖動列表，重新獲取列表的排序

whinc 發布于2019-08-23 18:07 / 1802人閱讀

摘要：文章首發在我的個人博客上有這樣一個列表需要拖動列表，改變順序，并把新的順序保存下來傳給后端。實現實現方法如下是當前元素下標，是拖動到的位置下標。

文章首發在我的個人博客上

有這樣一個列表：

需要拖動列表，改變順序，并把新的順序保存下來傳給后端。

實現實現方法如下：

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；

其他方法：++拖拽前、后都遍歷下這個列表，應該也能拿到列表中元素的排序++（該方法未嘗試）

云服務器 GPU云服務器拖動列表列表拖動獲取騰訊云的主機列表列表排序python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104703.html

拖放排序插件Sortable.js

摘要：介紹是一款輕量級的拖放排序列表的插件雖然體積小，但是功能很強大下載地址官方特點支持觸屏設備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進行排序移動列表單元時有動畫支持拖放操作和可選擇介紹 Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，但是功能很強大）下載地址：https://github.com/Ru...

tomorrowwu 2019-08-20 13:59 評論0 收藏0
用兩種不同的姿勢來實現拖動排序

摘要：前言魯迅說過如果你的技術不好，那么你的姿勢要多。元素不是被拖動目標時。先實現拖動的效果，大概就是這樣在的時候記下必要的信息將小強的改成在記錄下鼠標在軸上移動的距離，橫行的話就是這樣基本的拖動問題是解決了，元素最起碼是可以拖動起來了。前言魯迅說過：如果你的技術不好，那么你的姿勢要多。 showImg(https://segmentfault.com/img/bVZSnT?w=500&...

paney129 2019-08-29 13:58 評論0 收藏0
用兩種不同的姿勢來實現拖動排序

摘要：前言魯迅說過如果你的技術不好，那么你的姿勢要多。元素不是被拖動目標時。先實現拖動的效果，大概就是這樣在的時候記下必要的信息將小強的改成在記錄下鼠標在軸上移動的距離，橫行的話就是這樣基本的拖動問題是解決了，元素最起碼是可以拖動起來了。前言魯迅說過：如果你的技術不好，那么你的姿勢要多。 showImg(https://segmentfault.com/img/bVZSnT?w=500&...

zsy888 2019-08-21 17:58 評論0 收藏0