Jquery ui 将jQuery UI可排序元素作为组移动

我有一个排序表，其中两个连续的元素可以相互“连接”。执行附加操作时，我将两个“field”元素包装在“field group container”div中，希望能够将两个内部“field”元素作为一个单元拖动

奇怪的是，如果我从字段组容器的第一个子项（两个子项中的一个子项）开始拖动，这种方法就可以完美地工作，但是，如果我从第二个子项开始拖动，字段就会从字段组容器中拉出。我希望两个字段元素一起移动，而不管单击哪个元素来启动拖动

我尝试使“items”可排序选项更具体，只允许拖动字段组容器和不是字段组容器子级的字段，但看起来单击事件在冒泡到字段组容器之前被取消

为了查明这是sortable的问题还是我的实现的问题，我创建了一个简化版本，看看是否可以复制我的问题

<div id="sortable">
    <div class="field">A</div>
    <div class="field">B</div>
    <div class="field-group-container">
        <div class="field">C</div>
        <div class="field">D</div>
    </div>
    <div class="field">E</div>
    <div class="field">F</div>
    <div class="field">G</div>
</div>

A.
B
C
D
E
F
G

它的工作原理完全符合预期

这与我在项目中观察到的行为相矛盾。在我的真实世界里 实现“field”元素有几个内部元素，例如 如标签、按钮等

我的问题

有人知道是什么导致了这种行为吗

是什么导致我的两个字段元素不能作为一个整体移动 即使它们都包装在父容器中

---

如何在应用程序中初始化可排序表，有哪些选项？能否在

中创建一个带有

按钮、标签等的小提琴？