jQuery UI Sortable连接列表：单次克隆与删除功能实现求助

完整解决方案代码 #

HTML结构

<ul id="sortable1" class="connectedSortable">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
  <li id="item4">Item 4</li>
  <li id="item5">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li id="item6">Item 6 <button class="delete-btn">删除</button></li>
  <li id="item7">Item 7 <button class="delete-btn">删除</button></li>
</ul>

<p id="sort-2"></p>

基础样式

.connectedSortable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0 0 2.5em; 
  float: left; 
  margin-right: 10px; 
}
.connectedSortable li { 
  margin: 0 5px 5px 5px; 
  padding: 5px; 
  font-size: 1.2em; 
  width: 120px; 
}
.delete-btn { float: right; }

核心JavaScript逻辑

$(function() {
  // 父列表配置：拖拽时显示克隆体
  $("#sortable1").sortable({
    connectWith: ".connectedSortable",
    helper: 'clone', // 关键：拖拽时使用克隆元素而非原元素
    update: function(event, ui) {
      var productOrder = $(this).sortable('toArray').toString();
      $("#sort-2").text(productOrder);
    }
  }).disableSelection();

  // 子列表配置：处理克隆接收与排序
  $("#sortable2").sortable({
    connectWith: ".connectedSortable",
    receive: function(event, ui) {
      var draggedItemId = ui.item.attr('id');
      // 校验：子列表无重复项 + 父项未被克隆过
      if ($("#sortable2 #" + draggedItemId).length === 0 && !ui.item.data('cloned')) {
        // 克隆父项并添加删除按钮
        var clonedItem = ui.item.clone();
        clonedItem.append(' <button class="delete-btn">删除</button>');
        // 将克隆项追加到子列表
        $(this).append(clonedItem);
        // 标记父项为已克隆，防止重复操作
        ui.item.data('cloned', true);
      }
      // 移除默认移动过来的原项（保留父列表的原元素）
      ui.item.remove();
      // 更新排序字符串
      var childOrder = $(this).sortable('toArray').toString();
      $("#sort-2").text(childOrder);
    },
    update: function(event, ui) {
      // 子列表排序变更时同步更新排序字符串
      var childOrder = $(this).sortable('toArray').toString();
      $("#sort-2").text(childOrder);
    }
  }).disableSelection();

  // 事件委托处理删除按钮（兼容动态生成的克隆项）
  $(document).on('click', '.delete-btn', function() {
    var deletedItemId = $(this).parent().attr('id');
    // 删除子列表中的目标项
    $(this).parent().remove();
    // 取消父项的克隆标记（允许再次克隆，不需要可删除此行）
    $("#sortable1 #" + deletedItemId).removeData('cloned');
    // 更新排序字符串
    var childOrder = $("#sortable2").sortable('toArray').toString();
    $("#sort-2").text(childOrder);
  });
});

关键实现说明 #

1. 单次克隆限制

   • 用helper: 'clone'实现拖拽时显示克隆体，避免直接移动父列表元素
   • 通过data('cloned')标记父项状态，结合子列表ID校验，确保每个父项仅能克隆一次
   • 接收拖拽后移除默认移动的原元素，保留父列表的原始项

2. 动态删除功能

   • 克隆父项时手动追加删除按钮HTML，保持与原有子项结构一致
   • 使用事件委托绑定删除事件，确保动态生成的克隆项也能触发删除操作
   • 删除子项时可选择取消父项的克隆标记，允许后续重新克隆（按需启用）

3. 排序状态同步

   • 给子列表添加update事件，确保排序、添加、删除操作后，排序ID字符串能实时更新

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