Javascript 我需要将一个div下的div拖到另一个div并对其进行排序

我正在开发一个应用程序，它的div中充满了产品/子产品。我希望能够将产品从产品列表拖到另一个div

我想能够重新安排在其他部门的产品和子产品的顺序

这是我的html：

<div id="product-list">
   <div class="product">Product 1</div>
   <div class="sub-product">Product 1 - Sub Product 1</div>
   <div class="sub-product">Product 1 - Sub Product 2</div>
   <div class="sub-product">Product 1 - Sub Product 3</div>
   <div class="product">Product 2</div>
   <div class="sub-product">Product 2 - Sub Product 1</div>
   <div class="sub-product">Product 2 - Sub Product 2</div>
   <div class="product">Product 3</div>
</div>

<div id="wishlist">

</div>

产品1
产品1-子产品1
产品1-子产品2
产品1-子产品3
产品2
产品2-子产品1
产品2-子产品2
产品3

我看到了这个例子：

---

不幸的是，它对我不起作用。有人有什么建议吗？

我试过了，似乎效果不错。我可以拖放产品并重新排列

这是我使用的js：

$( function() {
    $(".product").draggable({
    containment: "#wishlist"
    });
    $(".sub-product").draggable({
    containment: "#wishlist"
    });
    $("#wishlist").droppable({
      drop: function( event, styles ) {
        $(this)
          .addClass("style-after-drop");
      }
    });
  } );

看看这把小提琴：

---

附言：如果我在你的问题中遗漏了什么，请告诉我。

我写这篇文章时很累，可能是我犯了一个错误。谢谢你的帮助！