jQuery UI 是一个常用的前端框架，其中包含了许多有用的组件。其中一个组件是 Sortable，它可以使元素变得可拖拽并且可以排序。当需要对多个列表进行排序时，我们可能需要将它们连接在一起，以便在拖放时可以交换元素。
实现思路
连接多个可排序列表的实现思路如下：
- 在每个可排序列表上设置相同的类名，以便它们可以被选择器选中。
- 使用 jQuery UI 的 sortable() 方法初始化可排序列表，并传入一些选项，例如 containment、connectWith 等。
- 将 connectWith 选项设置为其他可排序列表的选择器，以便它们之间可以互相连接。
- 如果您需要在列表项之间拖动元素时，切换它们的位置，请使用 placeholder 选项指定占位符的样式。
以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- -------------
----- ---------------- -------------------------------------------------------------
-------
-- - ---------------- ----- ------- -- -------- -- -
-- - ------- ---- -------- ---- ------ ------ -
------------------ - ------- --- ----- ----- -
------------ - ------- --- ------ ----- ------- ----- -
--------
-------
------
--- --------------------------
-------- ------
-------- ------
-------- ------
-----
--- --------------------------
-------- ------
-------- ------
-------- ------
-----
--- --------------------------
-------- ------
-------- ------
-------- ------
-----
------- -----------------------------------------------------
------- ------------------------------------------------------------
--------
------------ -
----------------------------------
------------ --------------
------------ --------------------
---
---
---------
-------
-------结语
以上就是连接多个可排序列表的实现方法。通过使用 jQuery UI 的 Sortable 组件，我们可以轻松地实现这个功能，并为用户提供更好的交互体验。希望这篇文章能对您有所帮助，让您在前端开发中更加得心应手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30140