JSFiddle - React, Tailwind, and code Playground

by cesutherland

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<ul class="outer">
    <li>Outer 1<ul class="inner"></ul></li>
    <li>Outer 2<ul class="inner"></ul></li>
    <li>Outer 3
        <ul class="inner">
            <li>Inner 1</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Outer 4<ul class="inner"></ul></li>
    <li>Outer 5
        <ul class="inner">
            <li>Inner 3</li>
            <li>Inner 4</li>
            <li>Inner 5</li>
        </ul>
    </li>
    <li>Outer 6<ul class="inner"></ul></li>
</ul>

CSS

.inner {
margin-left: 8px;
    padding-bottom: 4px;
}

JavaScript

$(function () {
  $('ul.outer, ul.inner').sortable({
      connectWith : 'ul'
  });
});