JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="http://codeorigin.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<ul class="menu">
    <li><a href="#">Menu one</a></li>
 <li><a href="#">Menu two</a></li>
     <li><a href="#" class="active">Menu three</a></li>
     <li><a href="#">Menu four</a></li>
<br><br>

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 
<ul id="sortable">
  <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>

CSS

li {
    list-style: none;
}

ul.menu li {
    display: inline-block;
    margin: 10px;
}

ul#sortable li {
    cursor: pointer;
    background: #ccc;
    margin-bottom: 10px;
    display: block !important;
}

JavaScript

$(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });

$('ul.menu li a.active').append('<span class="caret"></span>');