react-sortable-js两类项及嵌套项排序问题排查与修复咨询

核心问题点 #

1. 跨容器拖拽权限未配置：外层列表和分类内部的嵌套列表没设置统一的group规则，导致不同层级的项无法互相拖拽。
2. 拖拽后的数据更新逻辑缺失：onEnd事件里没针对三种场景做对应的数据处理——比如把普通项加入分类的子项列表、把嵌套项移到同级列表、移动整个分类时同步调整父列表顺序。
3. 分类整体拖拽未启用：没有给分类容器设置拖拽允许，导致无法带着所有子项整体移动分类。

具体修复步骤 #

1. 统一Sortable的group配置

给外层和内层嵌套的Sortable设置相同的group名称，确保跨容器拖拽被允许：

// 外层列表的Sortable
<Sortable
  group={{ name: 'category-item-group' }}
  onEnd={handleSortEnd}
  // 其他属性
>
  {/* 渲染分类和普通项 */}
</Sortable>

// 分类内部的嵌套Sortable
<Sortable
  group={{ name: 'category-item-group' }}
  // 其他属性
>
  {/* 渲染分类的子项 */}
</Sortable>

2. 完善onEnd事件的数据更新逻辑

在handleSortEnd里根据拖拽的源容器、目标容器、拖拽项的位置，区分三种场景更新数据源：

const handleSortEnd = (evt: SortableEvent) => {
  const { item, from, to, oldIndex, newIndex } = evt;
  const draggedId = item.dataset.id;
  // 深拷贝原数据，避免直接修改状态
  const newList = JSON.parse(JSON.stringify(items));

  // 场景1：把普通项移到分类内部（目标是嵌套Sortable容器）
  if (to.classList.contains('category-inner-list')) {
    // 找到目标分类
    const targetCategory = newList.find(item => item.type === 'category' && item.id === to.dataset.categoryId);
    // 从原列表移除拖拽项
    const draggedItem = newList.splice(oldIndex, 1)[0];
    // 添加到分类的子项数组
    targetCategory.children.push(draggedItem);
  }
  // 场景2：把分类的嵌套项移到同级列表（源是嵌套容器，目标是外层列表）
  else if (from.classList.contains('category-inner-list') && !to.classList.contains('category-inner-list')) {
    // 找到原分类
    const sourceCategory = newList.find(item => item.type === 'category' && item.id === from.dataset.categoryId);
    // 从分类子项中移除拖拽项
    const draggedItem = sourceCategory.children.splice(oldIndex, 1)[0];
    // 添加到外层列表对应位置
    newList.splice(newIndex, 0, draggedItem);
  }
  // 场景3：移动整个分类（拖拽的是分类容器）
  else if (item.classList.contains('category-container')) {
    const [movedCategory] = newList.splice(oldIndex, 1);
    newList.splice(newIndex, 0, movedCategory);
  }
  // 普通同级项移动
  else {
    const [movedItem] = newList.splice(oldIndex, 1);
    newList.splice(newIndex, 0, movedItem);
  }

  setItems(newList);
};

3. 给DOM元素添加拖拽标识属性

渲染时给每个元素加上唯一标识的data-id，给分类容器和嵌套列表加对应类名与分类ID标识：

// 渲染分类项
<div key={category.id} className="category-container" data-id={category.id}>
  <div className="category-title">{category.name}</div>
  <Sortable
    group={{ name: 'category-item-group' }}
    className="category-inner-list"
    data-category-id={category.id}
  >
    {category.children.map(item => (
      <div key={item.id} className="item" data-id={item.id}>
        {item.name}
      </div>
    ))}
  </Sortable>
</div>

// 渲染普通项
<div key={item.id} className="item" data-id={item.id}>
  {item.name}
</div>

4. 启用分类的整体拖拽

给外层Sortable设置拖拽手柄（或直接允许整个分类容器拖拽），确保分类可以被整体移动：

// 外层Sortable添加handle属性，指定分类标题为拖拽手柄
<Sortable
  group={{ name: 'category-item-group' }}
  handle=".category-title"
  onEnd={handleSortEnd}
>
  {/* ... */}
</Sortable>

额外注意事项 #

• 所有项的id必须唯一，React渲染时的key必须使用这个唯一id，不能用索引，避免渲染混乱。
• 数据结构要明确区分分类和普通项：

interface BaseItem {
  id: string;
  name: string;
}

interface NormalItem extends BaseItem {
  type: 'item';
}

interface CategoryItem extends BaseItem {
  type: 'category';
  children: NormalItem[];
}

type ListItem = NormalItem | CategoryItem;

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