JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
<p>
Your wishlist:
</p>
<div id="wishlist">
</div>

CSS

#wishlist {
  height: 50vh;
  border: 1px solid red;
  margin-top: 5px;
  padding: 10px;
}

#product-list {
  height: 30vh;
  border: 1px solid green;
  padding: 10px;
}
.style-after-drop {
  background: rgb(255,0,1);
}

JavaScript

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