Javascript 如何使用JqueryUi sortable一次并同时分别拖动多个项目？

我做了一项研究，但没有发现任何适合我的情况。这是我的简化html

<div>
  <div>
    <ul class="sortable">
      <li id="item-1">
        <!-- item -->
        <ul>
          <!-- plenty of li tags -->
          <!-- they have ids like: item-1.1, item-1.2 and so on -->
        <ul>
      </li>
    </ul>
  </div>
  <div>
    <ul class="sortable">
      <!-- same goes here -->
    </ul>
  </div>
</div>

我用于排序的代码

const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}
$(".sortable").sortable(sortableOptions).disableSelection();

---

有什么方法可以实现这一点吗？

您可以向子

ul

元素添加

.sortable

，如下所示

我已经稍微修改了

CSS

，理想情况下您应该避免使用

！重要信息

。我在

.sortable

元素的底部添加了填充，以便更容易将项目拖动到列表的底部，并用虚线边框表示缩进的可拖放区域

您还可以看到，您可以继续缩进后续的可拖放子级

ul

，尽管它开始看起来很忙

如果这不是你想要的，请告诉我

---

const sortableOptions={
连接到：“.sortable”，
取消：“.ignore sortable”，
占位符：“ui状态突出显示”，
}
$（“.sortable”）.sortable（sortableOptions.disableSelection（）
.sortable{
背景色：rgba（220、224、228、.25）；
垫底：1米；
边界半径：8px；
边框：1px纯蓝色；
}
.可排序的，可排序的{
背景：无；
边框样式：虚线；
}



第一节

1.1


1.1
1.2

1.2





第二名单第1组

1.1
1.2


第二组名单2




第一节

1.1


1.1

1.1.1
1.1.2


1.2

1.2



Maaan，非常感谢我不知道为什么我以前没有考虑过这个问题，我只是使用了UL标签，没有可排序类
const sortableOptions = {
  connectWith: ".sortable",
  cancel: ".ignore-sortable",
  placeholder: "ui-state-highlight",
}
$(".sortable").sortable(sortableOptions).disableSelection();