jQuery UI Droppable同类型元素合并后无法拆分为单个元素问题求助

你当前的代码仅修改了合并项的计数文本为1，没有生成额外的独立拖拽项，也没有更新原合并项的计数，因此无法完成拆分。

实现拆分的核心逻辑 #

你可以在拖拽启动、或者合并项点击事件中触发拆分，核心步骤如下：

1. 触发拆分时先读取当前合并项的计数值
2. 原合并项计数减1，若减至0则直接移除原项
3. 克隆生成一个新的同类型拖拽项，计数设为1，绑定对应的拖拽事件
4. 将新生成的独立项插入到目标位置（如当前槽位、拖拽目标槽位）

拖拽触发拆分的代码示例

在draggable的dragstart事件中增加拆分判断：

$(".draggable-item").on("dragstart", function(event, ui) {
  const $currentItem = $(this);
  const itemCount = parseInt($currentItem.find(".size").text().trim(), 10);
  // 仅计数大于1的合并项可拆分
  if (itemCount <= 1) return;

  // 更新原合并项计数
  $currentItem.find(".size").text(itemCount - 1);
  // 原项计数归零则删除
  if (itemCount - 1 === 0) {
    $currentItem.remove();
  }

  // 生成新的独立拆分项
  const $splitItem = $currentItem.clone();
  $splitItem.find(".size").text(1);
  // 绑定拖拽配置，和你原有draggable配置保持一致即可
  $splitItem.draggable({
    revert: "invalid",
    helper: "original",
    scope: "your-drop-scope"
  });

  // 替换当前拖拽对象为拆分出的独立项
  ui.helper.replaceWith($splitItem);
  ui.helper = $splitItem;
});

原有合并逻辑的兼容调整

如果需要支持按住功能键拖动时不合并直接放独立项，可在droppable的drop事件中增加判断：

$(".droppable-slot").on("drop", function(event, ui) {
  const $dragItem = $(ui.draggable);
  const $targetSlot = $(this);
  const isAltPress = event.altKey; // 按住Alt键时不合并
  const sameTypeItem = $targetSlot.find(`[data-type="${$dragItem.data('type')}"]`);

  // 按下Alt键或没有同类型项时，直接插入独立项
  if (isAltPress || sameTypeItem.length === 0) {
    const $newItem = $dragItem.clone().removeClass("ui-draggable-dragging");
    $newItem.draggable({ /* 原有拖拽配置 */ });
    $targetSlot.append($newItem);
    return;
  }

  // 原有合并逻辑
  const currentCount = parseInt(sameTypeItem.find(".size").text(), 10);
  sameTypeItem.find(".size").text(currentCount + 1);
});

注意事项 #

• 克隆生成的新元素必须重新绑定draggable事件，否则无法正常拖拽
• 计数运算前必须用parseInt转成数字类型，避免字符串拼接错误
• 可根据业务需求选择拆分触发方式，除了拖拽触发外，也可以给合并项增加双击触发拆分的交互

内容的提问来源于stack exchange，提问作者josephgibso.n5