JSFiddle - React, Tailwind, and code Playground

by brainsengineering

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

CSS

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

JavaScript

$(function() {
    
    $( "#sortable1 li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#sortable2" ).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() {
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });