如何使用jQuery Sortable创建子列表？拖拽生成子列表失败求助

第一步：基础HTML结构 #

先确保你的列表结构支持嵌套，初始可以是扁平的，后续拖拽时自动生成子列表：

<ul class="sortable-folder">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>

第二步：调整后的Sortable代码 #

$('.sortable-folder').sortable({
  connectWith: '.sortable-folder',
  dropOnEmpty: true,
  items: '> li', // 只处理当前容器的直接子li，避免嵌套层级混乱
  tolerance: 'intersect', // 优化拖拽判定，更容易触发嵌套放置
  stop: function(event, ui) {
    const draggedItem = ui.item;
    // 获取拖拽落点对应的父级li（如果落点是li内部的话）
    const dropTargetLi = $(event.target).closest('li');

    // 排除拖拽到自身、或者直接拖拽到ul的情况
    if (dropTargetLi.length && !draggedItem.is(dropTargetLi)) {
      // 检查目标li是否已有子排序列表
      let subList = dropTargetLi.children('.sortable-folder');
      if (subList.length === 0) {
        // 创建新的子列表并初始化sortable
        subList = $('<ul class="sortable-folder"></ul>').appendTo(dropTargetLi);
        subList.sortable({
          connectWith: '.sortable-folder',
          dropOnEmpty: true,
          items: '> li',
          tolerance: 'intersect',
          stop: this.options.stop // 复用同一个stop回调，保持逻辑统一
        });
      }
      // 将拖拽元素移动到子列表中
      draggedItem.appendTo(subList);
    }

    // 清理空的子列表（补全你原本的逻辑）
    $('ul.sortable-folder').each(function() {
      if ($(this).children().length === 0) {
        $(this).remove();
      }
    });
  }
}).disableSelection();

关键逻辑说明 #

• items: '> li'：这个配置很重要，它限制每个sortable容器只处理自己的直接子级
• ，避免嵌套后子列表的元素和父列表的元素互相干扰，保证拖拽的层级正确。
• tolerance: 'intersect'：调整拖拽时的触发条件，当拖拽元素和目标元素有交叉重叠时就判定为可放置，比默认的pointer模式更容易触发嵌套拖拽的动作。
• 嵌套列表的动态创建：在stop事件里判断拖拽落点是否是某个
• ，如果是且该
• 没有子列表，就自动创建一个新的.sortable-folder列表并初始化Sortable，这样子列表也能支持拖拽排序和进一步嵌套。
• 空列表清理：拖拽结束后移除没有子元素的
  ，避免页面上残留无用的空容器。

  可选：添加CSS样式优化层级显示 #

  给嵌套的子列表加个缩进，让层级关系更直观：

  .sortable-folder {
    list-style: none;
    padding-left: 25px;
    margin: 0;
  }
  .sortable-folder > li {
    padding: 6px 10px;
    margin: 3px 0;
    background-color: #f5f5f5;
    border-radius: 4px;
    cursor: move;
  }
  

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