JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/html5sortable/0.1.1/html.sortable.min.js"></script>
<ul class="sortable connected">
    <li><i class="fa fa-arrows handle"></i> First Level Foo</li>
    <li><i class="fa fa-arrows handle"></i> First Level Bar</li>
    <li>
        <ul class="sortable connected">
            <li><i class="fa fa-arrows handle"></i> Second Level</li>
        </ul>
    </li>
</ul>

CSS

* {
    font-family: Ubuntu, Sans-serif;
}
ul li {
    margin: 15px;
}
ul li .handle {
    cursor: pointer;
}

JavaScript

$('.sortable').sortable({
    handle: ".handle",
    connectWith: '.connected'
});