问：

我的要求

1. 只有孩子才能有把手来移动它们，并在正确的组内重新排序
2. 其他组别的孩子不能混在一起
3. 当子元素经过其组时，它需要从移动子元素切换到移动父元素

↕️ = 符号化用户正在拖动的内容

Group A
  A_foo
  A_bar
  
Group B
  B_baz
  B_qux
  
Group C
  C_john
  C_tim

❌错

Group A
  A_bar
  
Group B
  A_foo ↕️ (❌ child moved into the wrong group and didn't move the parent)
  B_baz
  B_qux
  
Group C
  C_john
  C_tim

✔️ 正确

Group B
  B_baz
  B_qux

Group A (✔️ instead of moving just the child it moved the whole parent)
  A_bar
  A_foo ↕️
  
Group C
  C_tim
  C_john ↕️ (✔️ children are still able to rearranged )

1. 我尝试过在一个元素上使用多个句柄，同时限制父母和孩子可以去的地方。

2. 我尝试将拖动元素的 innerHTML 替换为父 HTML。但是，这导致了将父项复制到子位置的混乱。它看起来像这样。

Group B
  Group A
    A_foo ↕️
    A_bar
  B_baz
  B_qux
  
Group C
  C_john
  C_tim

3. 我尝试使用multiDrag来选择子元素和父元素，但是没有用。

我觉得我一定在 SortableJS 中缺少一些简单的东西