How to sort the product list by dragging and ensure that the spread is effective?

Front-end product list drag and drop sorting and cross-page effective plan

This article discusses an efficient front-end product list drag-and-drop sorting scheme that supports cross-page sorting and tries to avoid modifying existing product addition and modification logic. The initial value of sort field of each product in the database is 0, and the list is arranged in reverse order by default.

First, we need to initialize the sort field of the product and reserve enough space for subsequent sorting. You can use SQL statements to assign a larger interval value to all products, such as 1000:

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

This operation ensures that the sort value of each item has sufficient distinction. For example:

id	sort
1	1000
2	2000
3	3000

When the user drags and changes the product position, the algorithm calculates the intermediate value of the two product sort values ​​before and after the new position, and updates sort value of the dragged product to the intermediate value. For example, drag item 3 between item 1 and item 2:

新sort值= 1000 (2000 - 1000) / 2 = 1500

Updated results:

id	sort
1	1000
3	1500
2	2000

To prevent sort value from being too dense after multiple drags, affecting the subsequent sorting accuracy, it is recommended to readjust the interval of sort value regularly. It can be implemented through the following SQL statement:

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

This solution ensures sorting accuracy while minimizing modifications to existing codes and maintains the simplicity and efficiency of the algorithm. Through simple intermediate value calculation and periodic interval adjustment, the drag-and-drop sorting and cross-page effect functions of product list are realized.

The above is the detailed content of How to sort the product list by dragging and ensure that the spread is effective?. For more information, please follow other related articles on the PHP Chinese website!