Javascript 如何使用jquery sortable对一组元素进行排序并防止放置点

我有一个分类列表，每个分类下面都有自己的问题。我想对所有类别及其问题进行排序

根据我目前的代码，我只能对分类栏进行排序，但问题仍然存在

这是我的html（问题和类别可以是任意数量，因为创建它们时可以动态添加）：

我有一个例子来说明目前正在发生的事情

---

我怎样才能做到只对一个类别及其所有问题进行排序？只能够将它们排序在其他组之上或之下（因此不是在另一组中间的组）？

你需要把所有可排序的内容放在同一个子div中，并将它们链接到父级。

例如，将父div设置为这样：

<div id="sortMyContents">
    <div>Content to be draggable with everything inside</div>
    <div>Content to be draggable with everything inside</div>
</div>

/*下拉菜单*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
.btn成功{
背景色：#10355e！重要；
边框：1px实心#10355e！重要；
}
.酒吧{
高度：18px；
背景：绿色；
}
.savewpi{
边缘顶部：10px；
}
.deletefileclass{
光标：指针；
字体大小：20px；
颜色：#10355e；
}
.btn成功：悬停{
背景色：#051d38！重要；
边框：1px实心#051d38！重要；
}
.displaynonecoid{
显示：无；
}
lijstnaamtitle先生{
字体大小：20px；
颜色：#212529；
}
.lijsttitle{
宽度：85%！重要；
边际顶部：0px！重要；
}
李斯特雷苏特先生{
背景色：#10355e；
颜色：#fff；
填充：20px；
字体大小：20px；
边界半径：5px；
文本对齐：居中；
边缘顶部：15px；
显示：无；
}
霍克斯勒先生{
溢出-x：滚动！重要；
}
.hiddenupload{
显示：无；
}
.添加子页面{
显示：无；
}
.进度条{
背景色：#10355e！重要；
}
.fileDisplayArea img{
最大宽度：100%！重要；
}
塔里文海德先生{
背景色：#10355e；
颜色：#fff；
}
特林夫先生{
背景色：#Edaea；
}
公司{
最大宽度：100%；
}
海德洛戈先生{
最大高度：100px；
填充顶部：10px；
垫底：10px；
}
.开关场{
字体系列：“Lucida Grande”，Tahoma，Verdana，无衬线；
填充：40px；
溢出：隐藏；
}
.切换标题{
边缘底部：6px；
}
.开关场输入{
位置：绝对！重要；
剪辑：rect（0,0,0,0）；
高度：1px；
宽度：1px；
边界：0；
溢出：隐藏；
}
.交换机字段标签{
浮动：左；
}
.交换机字段标签{
显示：内联块；
宽度：60px；
背景色：#e4；
颜色：rgba（0,0,0,0.6）；
字体大小：14px；
字体大小：正常；
文本对齐：居中；
文本阴影：无；
填充：6px 14px；
边框：1px实心rgba（0,0,0,0.2）；
-webkit盒阴影：插入0 1px 3px rgba（0,0,0,0.3），0 1px rgba（255,255,0.1）；
框阴影：插入0 1px 3px rgba（0,0,0,0.3），0 1px rgba（255,255,0.1）；
-webkit转换：所有0.1易入易出；
-moz转换：所有0.1秒均易于输入输出；
-ms转换：所有0.1秒均易于输入输出；
-o型转换：所有0.1秒均易于输入输出；
过渡：所有0.1都易于输入输出；
}
.货柜标签{
位置：相对位置；
}
/*跨度的基础样式*/
.容器跨度：：之前，
.container span:：之后{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
保证金：自动；
}
/*单选按钮*/
.集装箱跨度.无线电：悬停{
光标：指针；
}
.addwerkplekinspectie输入[type=“radio”]{
显示：无；
}
.问题类{
左边距：15px；
字号：17px；
字号：500；
边框底部：2个实心#e9e9e9；
身高：90%；
}
nomarginleft先生{
左边距：0px！重要；
}
.输入{
字体大小：15px；
字号：500；
边缘底部：30px；
左边距：10px；
}
.borderbottom{
边框底部：2个实心#ccc；
}
.文字权利{
文本对齐：右对齐；
边缘顶部：5px；
}
.无线电开关{
显示：内联块；
边缘底部：.5rem；
左边距：60像素；
职位：相对！重要；
右：0px；
}
.container span.radio:：before{
左：-52px；
宽度：45px；
高度：25px；
背景色：#10355e；
边界半径：50px；
}
.container span.radio:：after{
左：-49px；
宽度：17px；
高度：17px；
边界半径：10px；
背景色：#6C788A；
过渡：左.25s，背景色.25s；
}
输入[type=“radio”]：选中+标记span.radio:：之后{
左：-27px；
背景色：#ffffff；
}
.分类{
字体大小：20px；
背景色：#10355e；
填充：10px；
颜色：#fff；
显示：块；
边界半径：3px；
}
.开关字段标签：悬停{
光标：指针；
}
.开关字段输入：选中+标签{
背景色：#A5DC86；
-webkit盒阴影：无；
盒影：无；
}
.开关字段标签：类型的第一个{
边界半径：4px 0 0 4px；
}
.开关字段标签：类型的最后一个{
边界半径：0 4px 4px 0；
}
.删除雇员{
显示：无；
字体大小：20px；
填充：20px；
文本对齐：居中；
背景色：#10355e；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
宽度：100%；
}
.deletewpi{
显示：无；
字体大小：20px；
填充：20px；
文本对齐：居中；
背景色：#10355e；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
宽度：100%；
}
.deletedtemplate{
显示：无；
字体大小：20px；
填充：20px；
文本对齐：居中；
背景色：#10355e；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
宽度：100%；
}
.增聘雇员{
显示：无；
字体大小：20px；
填充：20px；
文本对齐：居中；
背景色：#206b0a；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
}
.filedeletedmessage{
显示：无；
字体大小：15px；
填充物：5px；
文本对齐：居中；
背景色：#206b0a；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
}
.resultmessage{
显示：无；
字体大小：20px；
填充：20px；
文本对齐：居中；
背景色：#206b0a；
颜色：#fff；
边缘底部：20px；
边界半径：4px；
}
.resultmessageuser{
显示：无；
字体大小：20px；
填充：20px；
文本
$( "#sortablecats" ).sortable({
    placeholder: "ui-state-highlight",
    connectWith: "#questionrow",
    cancel: "#questionrow"
  });

<div id="sortMyContents">
    <div>Content to be draggable with everything inside</div>
    <div>Content to be draggable with everything inside</div>
</div>