我在元素中动态创建了一系列元素。我们的想法是创建部分和子部分，以便您可以在页面上显示：
头1
-Header2
- Header3
- Header3
-Header2
--- Header3
现在，目标是你可以通过拖放它们来排序这些（没问题）。这样我就可以对正文中的多个Header1进行排序，然后在每个Header1中对所有Header2进行排序，并在每个Header2中对所有Header3进行排序。
我最初通过为每个标头使用包装容器来完成此操作，因此可以对降序层的每个标头进行排序，但仅在其自身内，这会导致问题。因此，我的新方法是在一个大的可分类中自己制作每一个。问题是，我希望它如此，如果我单击并拖动Header2，它下面的所有Header3都随之移动，但不会移动任何其他Header2s或Header1s。这也适用于Header1s。
我尝试了jQuery插件multisortable，但这只是一种工作。它仅适用于Header1s和所有孩子，不适用于Header2s和它的孩子。
我可以很容易地说出要移动的元素，但我无法弄清楚如何让它们同时移动。
任何想法，插件等？
修改
为了举例。为了帮助实现可视化，我制作了一个JSFiddle和一些演示代码。我想要的就是将这类产品分为三个级别：
<ul>
<li class="h1">Header 1</li>
<li class="h2">Header 2</li>
<li class="h3">Header 3</li>
<li class="h3">Header 3</li>
<li class="h2">Header 2</li>
<li class="h3">Header 3</li>
<li class="h1">Header 1</li>
<li class="h2">Header 2</li>
<li class="h3">Header 3</li>
</ul>
在这个例子中，我想要它，这样如果你移动一个红色，它下面的所有绿色随之移动，如果你移动一个蓝色，所有红色（和绿色）随之移动。