如何通過拖動實現商品列表排序并確保跨頁生效？

前端商品列表拖拽排序及跨頁生效方案

本文探討一種高效的前端商品列表拖拽排序方案，該方案支持跨頁排序，并盡量避免修改現有商品添加和修改邏輯。數據庫中每個商品的sort字段初始值為0，列表默認按時間倒序排列。

首先，我們需要初始化商品的sort字段，為后續排序預留足夠空間。 可以使用sql語句為所有商品分配一個較大的間隔值，例如1000：

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

此操作確保每個商品的sort值具有足夠的區分度。 例如：

當用戶拖拽改變商品位置時，算法計算新位置前后兩個商品sort值的中間值，并將拖動商品的sort值更新為該中間值。例如，將商品3拖動到商品1和商品2之間：

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

更新后結果：

為防止多次拖拽后sort值過于密集，影響后續排序精度，建議定期重新調整sort值的間隔。 可以通過以下sql語句實現：

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

此方案在保證排序精度的同時，最大限度地減少了對現有代碼的修改，并保持了算法的簡潔性和效率。 通過簡單的中間值計算和周期性間隔調整，實現了商品列表的拖拽排序及跨頁生效功能。