jQuery UI 多列表拖拽核心是 sortable 插件配合 connectWith 选项实现跨列表连接，需统一初始化所有目标列表并确保 DOM 已存在，配置 connectWith 为相同选择器、启用 placeholder 与 pointer tolerance，并注意 dropOnEmpty、items 限制及 update 回调等增强项。
用 jQuery UI 实现多列表拖拽，核心是 sortable 插件配合 connectWith 选项，让多个列表之间可以互相拖放元素。关键不是单个列表可排序，而是“跨列表连接”——只要配置得当，拖拽项能自由进出不同容器。
准备基础结构和依赖
确保引入 jQuery 和 jQuery UI（含 sortable 模块），推荐使用 CDN：
- jQuery（1.8+，注意 jQuery UI 1.12+ 要求 jQuery 1.7+）
- jQuery UI 核心 + sortable（不需要 draggable/droppable 单独启用）
- HTML 中定义多个
<ul>或<ol>，每个带唯一 class 或 ID，如class="todo-list"
启用跨列表拖拽（connectWith 是关键）
对所有参与拖拽的列表统一调用 .sortable()，并设置 connectWith 指向同一选择器：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<pre class="brush:php;toolbar:false;">$(".todo-list").sortable({
connectWith: ".todo-list", // 所有带 todo-list 类的列表互连
placeholder: "ui-sortable-placeholder", // 可选：视觉占位符样式
tolerance: "pointer" // 推荐：按鼠标指针定位，比 'intersect' 更灵敏
});
⚠️ 注意：connectWith 的值必须是字符串选择器（如 <code>".list-group"），不能传 jQuery 对象或数组；所有目标列表必须在初始化前已存在于 DOM 中。
增强体验与常见控制
添加实用配置提升可用性：
-
禁用空列表接收：设
dropOnEmpty: false（默认 true，允许往空列表拖） -
限制拖拽范围：加
items: "> li"只允许直接子<li>拖拽，避免嵌套干扰 -
拖拽后回调处理：用
update事件保存新顺序，例如：update: function(event, ui) { console.log("列表已更新", $(this).attr("id")); } -
视觉反馈优化：CSS 中定义
.ui-sortable-placeholder的背景色、边框等，让用户看清插入位置
避免常见坑
实际开发中容易卡住的点：
- 多个 sortable 初始化顺序无关紧要，但必须全部初始化后才生效；动态新增的列表需手动再调用
.sortable() - 如果拖拽项无法进入某列表，检查该列表是否也调用了
.sortable()且connectWith值一致 - IE8/9 下可能需加
helper: "clone"避免拖拽闪烁（现代浏览器一般不需要） - 不要同时给同一元素设
draggable和sortable—— sortable 内置拖拽逻辑，叠加反而冲突
