JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul id="menu_items">
    <li>Home</li>
    <li>Products
        <ul>
            <li>Time Machine</li>
            <li>Transmogrifier</li>
            <li>Duplicator</li>
        </ul>
    </li>
    <li>Contact Us</li>
    <li>About Us</li>
</ul>

CSS

ul{ list-style:none; max-width:200px; margin:0; padding: 0 0 0 1px; min-height:10px; height:auto !important; height:10px; }
.placeholder{ height:10px;background:#f00; }
li{ padding:0; margin:1px; border-left:15px solid #9ff; }
li span{ float:left; }

JavaScript

$('#menu_items li').each(function(){
    if($('ul',this).length)return;
    $('<ul></ul>').appendTo(this);
});
$('#menu_items,#menu_items ul').sortable({
    'connectWith':['#menu_items,#menu_items ul'],
    'tolerance':'pointer',
    'placeholder':'placeholder',
    'cursor':'pointer',
    'items':'li'
})
.disableSelection();