怎样用jQueryUI做多列表拖拽-php教程-PHP中文网

jquery ui 多列表拖拽核心是 sortable 插件配合 connectwith 选项实现跨列表连接，需统一初始化所有目标列表并确保 dom 已存在，配置 connectwith 为相同选择器、启用 placeholder 与 pointer tolerance，并注意 droponempty、items 限制及 update 回调等增强项。

怎样用jqueryui做多列表拖拽

用 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></ul> 或 <ol></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

的值必须是字符串选择器（如 ".list-group"），不能传 jQuery 对象或数组；所有目标列表必须在初始化前已存在于 DOM 中。

增强体验与常见控制

添加实用配置提升可用性：

禁用空列表接收：设 dropOnEmpty: false（默认 true，允许往空列表拖）
限制拖拽范围：加 items: "> li" 只允许直接子 <li> 拖拽，避免嵌套干扰
拖拽后回调处理：用 update 事件保存新顺序，例如：
update: function(event, ui) { console.log("列表已更新", $(this).attr("id")); }
视觉反馈优化：CSS 中定义 .ui-sortable-placeholder 的背景色、边框等，让用户看清插入位置