我需要将 div 下的 div 拖到另一个 div 下并将它们排序

Question

我正在开发一个 div 充满 products/subproducts 的应用程序。我希望能够将产品从产品列表拖到另一个 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>

我看到了这个例子：Drag and Drop a div from the inside of another div

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

Answer 1

我试过了，似乎工作正常。我可以拖放产品并重新排列它。

这是我用的js:

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

看看这个fiddle:

https://jsfiddle.net/khushboo097/x0c1gy2r/96/

P.S：如果我在你的问题中遗漏了什么，请告诉我。？

我需要将 div 下的 div 拖到另一个 div 下并将它们排序

I need to take divs that are under a div and drag and sort them to another div

html

javascript

jquery

jquery-ui