在前端开发中，页面交互体验是非常关键的一部分。而拖动排序效果是其中一个常见的需求。
本文将介绍如何使用 jQuery 实现类似于 360 导航页图标拖动排序效果，并分享实现过程中的详细代码和思路。
效果演示
先看一下最终的效果：
可以看到，在该效果中，用户可以通过鼠标拖动图标来改变它们的位置，并且在释放鼠标时，所有图标会自动调整到它们应该在的位置上。
实现思路
要实现这个效果，我们需要做以下几件事情：
- 记录每个图标的位置信息。
- 监听鼠标拖动事件，并根据鼠标的位置移动相应的图标。
- 在释放鼠标时重新排列所有图标的位置。
基于以上思路，我们可以按照以下步骤来实现这个效果：
- 首先，给每一个图标设置一个唯一的 ID 和一个
.icon的 class，以方便后面操作。 - 使用 jQuery 绑定
mousedown和mousemove事件，并记录当前鼠标所在位置。 - 鼠标移动时，根据鼠标的位置移动相应的图标，并更新图标的位置信息。
- 在释放鼠标时，根据图标的位置信息重新排列所有图标。
代码实现
以下是完整的代码实现：
HTML：
--------- -----
------
------
----- ----------------
------------------------------------
----- ---------------- -----------------
-------
------
---- ------------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ -----------------
---- ------------ ------------------
------
------- ----------------------------------------------------------------------------
------- ------------------------
-------
-------CSS：
---------- - ------ ------ ------- - ----- -------- ----- ---------- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------- ----- ------- ----- ----------- --- --- --- ------- -- -- ----- -
JavaScript：
------------ -
--- ----- - -----------
--- ------------- - ---
-- ---------
--- ---- - - -- - - ------------- ---- -
--- ---- - ------------
--------------------
----- ---------------------
---- -------------------
---
-
-- --------
--------------------------- -
--- ---- - --------
-- ----------
--- ------ - --------
--- ------ - --------
-- -----------
--- ------------ - ---------------------
--- ----------- - --------------------
-- -------
--------------------------
-- --------
---------------------------------------------------------- ----------
-------------------------------------------------------------------------------------