如何通過拖動實現商品列表的排序并支持跨頁操作？

電商平臺商品列表拖拽排序及跨頁操作

許多電商應用需要支持用戶拖拽調整商品列表順序，并允許跨頁操作。本文介紹一種高效的排序算法，在最小化改動現有系統(tǒng)（例如商品添加和修改操作）的前提下，實現這一功能。數據庫已存在sort字段（初始值為0），商品列表當前按時間倒序展示。

排序算法設計

我們采用基于sort字段的算法。初始排序時，需要為每個商品的sort字段賦值，并預留足夠大的間隙，例如1000。 以下sql語句實現初始排序：

SET @sort := 0; UPDATE product SET sort = (@sort := @sort + 1000) ORDER BY id;

這將使sort值從1000開始，每次遞增1000。例如：

用戶拖拽商品時，重新計算新sort值。假設將id為3的商品拖動到id為1和id為2之間，新sort值為前后兩個sort值的中間值：

新sort值 = 1000 + (2000 – 1000) / 2 = 1500

更新id為3商品的sort值：

為提高靈活性，可在計算中間值時加入隨機數，避免sort值過于均勻。

當sort值間隙不足以支持更精細的排序時，重新調整sort值，擴大間隙：

SET @sort := 0; UPDATE product SET sort = (@sort := @sort + 1000) ORDER BY sort;

此算法確保排序功能持續(xù)高效，且對現有系統(tǒng)影響最小。 跨頁操作只需在拖拽過程中正確獲取目標位置的sort值即可，算法本身無需修改。