实现跨容器拖拽排序：jQuery UI 多区域可拖放盒子布局教程-html教程-PHP中文网

实现跨容器拖拽排序：jQuery UI 多区域可拖放盒子布局教程

本文详解如何使用 jquery ui 实现多个独立容器（div）之间的平滑拖拽与投放，支持视觉反馈、自动位置腾挪及 dom 结构动态重组，适用于看板式任务管理、模块化仪表盘等场景。

本文详解如何使用 jquery ui 实现多个独立容器（div）之间的平滑拖拽与投放，支持视觉反馈、自动位置腾挪及 dom 结构动态重组，适用于看板式任务管理、模块化仪表盘等场景。

要构建一个真正可用的跨容器拖放系统（如将 Box 11 从蓝色组拖入红色组），仅启用基础 .draggable() 和 .droppable() 是不够的——默认行为缺乏视觉引导、插入定位精度低，且无“占位腾挪”动画效果。下面我们将基于 jQuery UI 提供的专业能力，分步升级为生产级实现。

✅ 第一步：增强拖拽体验（视觉反馈 + 平滑回退）

原代码中 revert: true 仅做简单回弹，体验生硬。建议改用 revert: 'invalid'，并配合 helper: 'clone' 和 cursorAt 提升操控感：

$(".box").draggable({
  helper: "clone",           // 拖拽时显示副本，原元素保持可见
  cursorAt: { top: 10, left: 10 }, // 光标锚定在拖拽元素左上角附近
  revert: "invalid",         // 仅在无效区域（非 droppable）才回弹
  opacity: 0.8,
  zIndex: 1000
});

✅ 第二步：优化投放逻辑（支持插入式排序 + 占位动画）

.droppable() 默认 append() 会粗暴追加到末尾，破坏原有顺序。我们改用 插入式投放（insertBefore/insertAfter），并借助 over/out 事件动态添加占位符（placeholder）实现“腾挪感”：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(".group").droppable({
  accept: ".box",
  hoverClass: "drop-hover", // 鼠标悬停时高亮目标容器
  tolerance: "pointer",     // 以鼠标指针位置判定是否进入区域

  over: function(event, ui) {
    // 在目标容器内创建临时占位符（仅当未存在时）
    if (!$(this).find(".placeholder").length) {
      $(this).append('<div class="placeholder" style="height: 36px; background: rgba(0,120,255,0.1); border: 1px dashed #0078ff; margin: 5px 0;"></div>');
    }
  },

  out: function(event, ui) {
    $(this).find(".placeholder").remove();
  },

  drop: function(event, ui) {
    const $draggable = $(ui.draggable);
    const $targetGroup = $(this);
    const $placeholder = $targetGroup.find(".placeholder");

    // 移除占位符，并将拖拽元素插入到占位符位置（实现自然排序）
    $placeholder.replaceWith($draggable);

    // 可选：触发自定义事件，便于后续状态同步
    $targetGroup.trigger("boxDropped", [$draggable]);
  }
});

配套 CSS 增强视觉反馈：

.drop-hover {
  background-color: #e6f7ff !important;
  border-color: #40a9ff !important;
}
.placeholder {
  transition: all 0.2s ease;
}

✅ 第三步：关键注意事项与最佳实践

避免重复初始化：确保脚本在 DOM 加载完成后执行（$(document).ready()），且不要对已初始化元素重复调用 draggable/droppable，否则引发事件叠加。
ID 唯一性保障：移动后 id="box11" 仍保留在新容器中——这符合需求（无需重命名），但需注意若后续依赖 ID 绑定事件，应使用事件委托（如 $(document).on('click', '.box', handler)）。
移动端兼容性：jQuery UI 默认不支持触摸事件，如需移动端支持，请引入 jQuery UI Touch Punch 插件。
性能优化：当盒子数量较多（>50）时，建议禁用 hoverClass 或改用 CSS :hover，并减少 over/out 中的 DOM 操作。