拖拽排序背景設計與實作

文章目錄

• 需要實作的幾個需求:
• 實作方式
• • 一、全量更新元素位置法
  • • 适用場景
    • 原理
    • 具體實作
  • 二、取中值法
  • • 适用場景
    • 原理
    • 具體實作
  • 三、單表單列
  • • 适用場景
    • 具體實作

需要實作的幾個需求:

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位置上