需求描述
允許更改元素的排序；
允許新增資料，並更新現有排序；
允許刪除資料，並更新現有排序。
解決辦法
方法一 全量更新元素位置法
適用場景：排序元素數量較少
原理：每個元素擁有乙個字段，表示元素當前排序的位置。通過前端排序，將排好的元素位置，一次性傳送到後端。然後，後端統一更新所有元素的位置。
具體實現
實體設計：增加排序字段 sort，表示元素當前的位置。例如，sort = 1，則表示元素處於第一位。
前端邏輯：當前端排序後，或刪除元素後，將剩餘元素id，以陣列的形式傳送給後端。陣列的索引序號，則表示元素當前的排序。
後端實現邏輯：
刪除不存在前端陣列中的id。將前端 ids，與伺服器端的 ids 進行對比。刪除伺服器端存在但前端不存在的 ids。
按照陣列的排序，更新所有元素排序。
總結，此方法僅適用於排序元素較少（例如，總元素為5~15個）的場景。對於大量資料排序並不適用，適合首頁輪播圖管理、任務卡片管理。leangoo 的看板卡片管理就是採用這種方式。
建立元素時給元素賦預設位置（pos欄位記錄該值）。賦值規則為，當建立第乙個元素時，預設位置賦值為65536，第二個元素為 2 * 65536 = 13172，增加第n個元素時，位置賦值為n65536。
當拖拽改變元素位置時，更新 pos。更新規則如下：
調整乙個元素到兩個元素中間時，(pre_item.pos + after_item.pos）/ 2 = pos
調整乙個元素到第乙個元素時， old_first_item.pos / 2 = pos
調整乙個元素到最後乙個元素時， old_last_item.post + 65536 = pos
當前後兩個元素的數值，不滿足整數時，更新所有元素的排序。依次給每個元素的 pos賦新值。例如，第一位賦值65536，第二位為2 * 65536，第n位賦值n65536。
通過取中值的方法，改變元素的位置。當需要按序獲取時，只需要對 pos進行排序，就可以獲取元素的位置。
關於中值重排的問題，解決方法有多種。例如，我們可以使用浮點數儲存 pos，但是需要考慮資料庫儲存的精度問題。而且，數值過小，會在前端丟失精度，元素排序會出現問題。當然，如果在介面層，當檢測到中值過小，則對所有元素進行重排，介面相應速度會存在問題（如果是後端管理系統就不用考慮效能問題了）。
有人提出，利用定時任務每天對所有元素定時重排，來解決單次介面的效能問題。個人覺得這個方法，還是存在問題。若定時任務不及時，那麼排序由於精度問題，發生了排序錯亂的問題。那麼，定時重排已經無意義。
方法三 單錶單列
每個元素，都有乙個欄位index，表示元素的排序資訊。
規定元素從0開始遞增。
基本操作如下：
增加資料。 新增元素時，序號為當前元素資料總量值。
刪除元素。刪除元素時，將大於該元素的序號，都減1。
修改元素排序。當元素從 x 移動到 y 時，
若 x < y 時，則將(x, y)範圍內的元素都減1
若 x > y 時，則將(y, x)範圍內的元素都加1
查詢元素。展示列表時，按照 index 字段進行排序即可。若需要查第n位元素時，元素位置為 index = n - 1。
這種方式優點是，查詢快，修改慢。而且，修改介面的邏輯較重，處理起來比較麻煩。我們很多專案都是採用這種模式。在介面設計方面，我們讓前端傳給後端是乙個偏移值（offset），offset = y - x。當元素向排序大的方向移動時，offset的為正值；若往排序小的方向移動時，offset`為負值。
總結在選擇具體方案時，還需要根據具體的業務場景選擇。方案的選擇規則總結如下：
若排序元素較少，採用方案一；
若排序移動次數不是非常頻繁且對介面效能要求高，建議採用方案二；
若排序移動非常頻繁且介面效能要求不高，可以採用方案三。
react dnd實現卡片拖拽排序
最近工作中遇到乙個需求，需要對管理系統中的進行拖拽排序的功能 具體用到了react dnd來實現 下面是乙個利用react dnd實現的拖拽排序小demo 首先在react專案中執行以下命令 yarn add react dnd yarn add react dnd html5 backen car...
vue 原型設計 拖拽 Vue實現簡單的拖拽效果
自定義指令v drag l 存在時 只能橫向拖拽 t 存在時 只能縱向拖拽 lt都存在時 可以任意方向拖拽拖拽 margin 0 padding 0 box modifiers el.addeventlistener mousedown handledowncb let disx,disy func...
拖拽排序實現方案 的資料庫設計以及思路
拖拽排序實現方案增加欄位的方法 增加排序欄位sort sort 1 資料量少的情況下採用 陣列形式統一傳入後端，後端根據前端傳入的陣列序列進行迴圈重排 取中值法 大體上可以理解未sort 公升級版本，給預設第一位賦值 pos 較大引數1000 第二位就是2000 鍊錶形式結構的方案 例如 a1000...