JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<div id="products">
  <h2>Drag</h2>
  <div id="catalog">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
  </div>
</div>
 
<div id="cart">
  <h2>Drop Here...</h2>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>

CSS

body{font-family:verdana;font-size:12px;}
h2 {padding:5px;background:#222;margin:0px;color:#fff;}
ul,li{list-style:none;margin:0;padding:0;}
#products { float:left; width: 500px; }
#cart { width: 200px; float: left; margin-top: 1em; }
#cart ol {margin:0;padding:0;background:#E1FFDF;clear:both;overflow:hidden;}
#cart ol li{padding:10px;border-top:2px solid #fff;width:50px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;float:left;border-left:2px solid #000;cursor:pointer;}
#cart ol li:first-child{border-top:none;}
#products li{background:#eee;padding:5px;cursor:pointer;margin-bottom:5px;}
#products,#cart{display:block;clear:both;width:400px;}
.placeholder{background:none;color:#888;cursor:default;margin-bottom:0 !important;text-align:center;width:100% !important;float:none !important;border:none !important;}

JavaScript

$(function() {
    $( "#catalog li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#cart ol" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});