JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

<div id="products">
    
<h1 class="ui-widget-header">Products</h1>

    <div id="catalog">
        
<h2><a href="#">T-Shirts</a></h2>

        <div>
            <ul>
                <li>Lolcat Shirt</li>
                <li>Cheezeburger Shirt</li>
                <li>Buckit Shirt</li>
            </ul>
        </div>
        
<h2><a href="#">Bags</a></h2>

        <div>
            <ul>
                <li>Zebra Striped</li>
                <li>Black Leather</li>
                <li>Alligator Leather</li>
            </ul>
        </div>
        
<h2><a href="#">Gadgets</a></h2>

        <div>
            <ul>
                <li>iPhone</li>
                <li>iPod</li>
                <li>iPad</li>
            </ul>
        </div>
    </div>
</div>
<div id="cart">
    
<h1 class="ui-widget-header">Shopping Cart</h1>

    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Add your items here</li>
        </ol>
    </div>
</div>

CSS

h1 {
     padding: .2em;
     margin: 0;
 }
 #products {
     float:left;
     width: 500px;
     margin-right: 2em;
 }
 #cart {
     width: 200px;
     float: left;
     margin-top: 1em;
 }
 /* style the list to maximize the droppable hitarea */
 #cart ol {
     margin: 0;
     padding: 1em 0 1em 3em;
 }

JavaScript

$(function () {
     $("#catalog").accordion();
     $("#catalog li").draggable({
         appendTo: "body",
         helper: "clone",
         refreshPositions: true
     });
     $("#cart ol").droppable({
         activeClass: "ui-state-default",
         hoverClass: "ui-state-hover",
         accept: ":not(.ui-sortable-helper)",
         drop: function (event, ui) {

             if ($(this).find(".placeholder").length > 0) //add first element when cart is empty
             {
                 $(this).find(".placeholder").remove();
                 $("<li></li>").text(ui.draggable.text()).appendTo(this);
             } else {

                 var i = 0; //used as flag to find out if element added or not

                 $(this).children('li').each(function () {
                     if ($(this).offset().top >= ui.offset.top) //compare
                     {
                         $("<li></li>").text(ui.draggable.text()).insertBefore($(this));
                         i = 1;
                         return false; //break loop
                     }
                 })

                 if (i != 1) //if element dropped at the end of cart
                 {
                     $("<li></li>").text(ui.draggable.text()).appendTo(this);
                 }

             }

         }

     }).sortable({
         items: "li:not(.placeholder)",
         sort: function () {
             // gets added unintentionally by droppable interacting with sortable
             // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
             $(this).removeClass("ui-state-default");
         }
     });
 });