实现不同DIV分组间Box元素的Drag-and-Drop拖拽功能

下面是满足需求的完整实现代码，基于你已引入的jQuery UI完成拖拽交互开发：

<html>

<head>
  <meta charset="UTF-8">
  <title>Organize Boxes</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .box {
      background-color: #f0f0f0;
      padding: 10px;
      margin: 5px;
      text-align: center;
      cursor: move;
      flex-shrink: 0; /* 防止Box被挤压变形 */
      width: 100px; /* 固定宽度保证布局规整 */
    }
    
    .group {
      margin: 10px;
      text-align: left;
      display: flex;
      border: 1px solid black;
      padding: 10px;
      min-height: 120px; /* 空分组也能接收拖拽元素 */
      gap: 5px;
    }
    
    .group1 {
      border: 1px solid blue;
    }
    
    .group2 {
      border: 1px solid red;
    }
    
    .group3 {
      border: 1px solid green;
    }
    
    /* 拖拽占位符样式，实现避让效果 */
    .ui-state-highlight {
      background-color: #e0e0e0;
      border: 1px dashed #999;
      width: 100px;
      height: 40px;
      margin: 5px;
    }
  </style>
</head>

<body>
  <div class='boxes'>
    <div id="group1" class='group group1'>
      <div class="box" id="box11">Box 11</div>
      <div class="box" id="box12">Box 12</div>
    </div>
    <div id="group2" class='group group2'>
      <div class="box" id="box21">Box 21</div>
      <div class="box" id="box22">Box 22</div>
      <div class="box" id="box23">Box 23</div>
    </div>
    <div id="group3" class='group group3'>
      <div class="box" id="box31">Box 31</div>
    </div>
  </div>

  <script>
    $(function() {
      // 初始化所有分组为可排序容器，支持跨分组拖拽
      $(".group").sortable({
        connectWith: ".group", // 允许所有.group容器间的拖拽交互
        placeholder: "ui-state-highlight", // 拖拽时显示占位区域，触发元素避让
        helper: "clone", // 拖拽时显示克隆元素，优化视觉体验
        revert: true // 拖拽结束后元素平滑归位
      }).disableSelection(); // 禁用文本选中，避免拖拽时干扰操作
    });
  </script>
</body>

</html>

核心实现细节 #

• 跨分组拖拽：通过connectWith: ".group"属性，让所有带.group类的容器互相连通，Box元素可在任意分组间自由移动。
• 保留Box ID：jQuery UI的Sortable仅移动DOM元素位置，不会修改元素ID属性，完全匹配需求。
• 避让交互效果：设置placeholder: "ui-state-highlight"后，拖拽过程中目标位置会显示占位区域，原有Box自动调整位置腾出空间；配合revert: true让元素归位更平滑。额外给.box添加flex-shrink: 0防止挤压变形，给分组设置min-height保证空分组也能接收拖拽元素。

内容的提问来源于stack exchange，提问作者Walter Robynson