jQuery UI 新追加category类li无法作为droppable接收subcategory拖拽问题

问题根因 #

页面加载阶段执行的droppable绑定只会作用于当时已经存在的.category元素，后续动态新增的category DOM节点没有经过droppable初始化，因此无法接收subcategory的拖拽投放。

解决方案 #

1. 抽离公共的droppable初始化方法 #

将category的droppable配置抽为可重复调用的公共函数，避免重复代码，同时支持对单个新增元素初始化：

// 初始化category的droppable能力，支持传入指定元素，默认初始化所有未绑定的category
function initCategoryDroppable(targetEl) {
  const $target = $(targetEl || '.category:not(.ui-droppable)');
  $target.droppable({
    accept: '.subcategory, .category',
    // 保留你原来的其他droppable配置，比如hoverClass、tolerance等
    drop: function (event, ui) {
      const $dragEl = ui.draggable;
      // 区分拖拽元素类型处理投放逻辑
      if ($dragEl.hasClass('subcategory')) {
        // subcategory投放进当前category的子列表
        const $newSub = $dragEl.clone(true)
          .removeClass('ui-draggable ui-draggable-handle')
          .addClass('ui-state-highlight');
        // 没有子ol则先创建
        if ($(this).children('ol').length === 0) {
          $(this).append('<ol></ol>');
        }
        $(this).children('ol').append($newSub);
      } else if ($dragEl.hasClass('category')) {
        // category投放进根列表
        const $newCat = $dragEl.clone(true)
          .removeClass('ui-draggable ui-draggable-handle')
          .addClass('ui-state-highlight');
        $('.list').append($newCat);
        // 关键：给新增的category初始化droppable能力
        initCategoryDroppable($newCat);
      }
    }
  });
}

2. 页面初始化时调用方法 #

页面加载完成后，先给已存在的category初始化droppable：

$(function () {
  // 初始化已有的category
  initCategoryDroppable();
  // 你原来的draggable初始化逻辑保持不变
  $('.drag-source .category, .drag-source .subcategory').draggable({
    helper: 'clone',
    // 其他draggable配置保持不变
  });
});

关键说明 #

• clone(true)只能克隆原生DOM绑定的事件，不会继承jQuery UI的droppable/draggable实例，所以新增的category必须手动调用初始化方法
• 选择器加了:not(.ui-droppable)过滤，避免重复初始化已经绑定过能力的元素，防止事件冲突
• 投放逻辑需要区分拖拽元素类型，不要全部append到根列表，否则subcategory无法挂载到对应category下

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