拖拽排序後臺設計與實現

需要實現的幾個需求:

  1. 允許更改元素的排序
  2. 允許新增數據,並更新現有排序
  3. 允許刪除數據,並更新現有排序

實現方式

一、全量更新元素位置法

適用場景

排序元素數量較少,對於大量數據排序不適用

原理

每一個元素擁有一個字段,表示元素當前排序的位置,通過前端排序,將排好的元素位置,一次性發送到後端。然後,後端統一更新所有元素的位置

具體實現

實體設計:

增加排序字段sort,表示元素當前的位置。例如,sort=1,則表示元素處於第一位

接口設計

前端發送id數組,數組的索引表示數組當前的排序位置
例如:[3,2,4,1] 表示id爲3的sortId爲1,id爲4的數組sortId爲3

移動元素

移動元素後前端將id數組發送給後臺

刪除元素

刪除元素直接刪除id對應的元素對排序沒什麼影響,不過可能出現sortId出現跳過某個值的情況。也可以刪除前端發過來數組中不存在而服務器端存在的元素,然後根據刪除後的數組元素進行全部更新

新增元素

新增元素時如果想要放在最後一位,那麼sortId爲sortId的最大值加一,如果想要將新增的元素放在第一位,那麼將前端把新加的數組放在第一位,發數組id給後端再進行全排序

二、取中值法

適用場景

數據量較多,移動次數不是很頻繁

原理

新加一個字段sortId,每個字段之間的間隔都很大,例如第一個65536,第一個爲2*65536,當改變了某個元素的位置時,只要前端發送這個元素id和想要移動到的位置的id對應的sortId,後臺根據拖拽的位置進行更新

具體實現

移動元素

調整一個元素到兩個元素之間時,此元素的sortId爲調整後位置前後兩個元素的sortId相加除以2,即sortId = (pre_sortId + after_sortId)/2,
調整一個元素到第一個元素,此元素的sortId爲之前處於第一的元素的 sortid 一半,即sortId = first_sortId / 2,調整一個元素到最後一個元素時,此元素的sortId爲最後一個元素加65536,即sortId = old_sortId + 65536

刪除元素

不影響排序

新增元素

創建第一個元素時默認爲65536,第二個元素爲265536,第N個元素爲N65536

注意:

理論上這種方式可以一直變更順序,但是考慮到由於精度的限制,所以sortId在某個情況下就可能變得變得很小導致排序失效,所以有兩個方法,一是設置一個安全值,當sortId低於這個安全值時就進行全表的重排,二是通過定時全表進行更新

三、單表單列

適用場景

快取取出某一位置的元素,查詢次數多修改頻率少的每個元素,都有一個字段index,表示元素的排序信息,規定元素從0開始遞增。

具體實現

新增元素
新增元素時,序號爲當前元素數據總量-1

刪除元素
刪除元素時,將大於該序號的元素index都減1

修改元素
前端發送一個偏移量,有正有負,比如從第5移動到第3,那麼偏移量就是-2,那麼移動的元素的index加上偏移量,然後將移動元素的原位置的偏移量範圍內的元素進行加減

例如:
第6移動到第3,偏移量爲-3,那麼將第3到第5的位置index都加1,將當前元素的index加上偏移量,即5-3=2,在第3位置上

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章