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><ul class="inner"><li class="parent">Outer 1</li></ul></li>
    <li><ul class="inner"><li class="parent">Outer 2</li></ul></li>
    <li>
        <ul class="inner">
            <li class="parent">Outer 3</li>
            <li>Inner 1</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li><ul class="inner"><li class="parent">Outer 4</li></ul></li>
    <li>
        <ul class="inner">
            <li class="parent">Outer 5</li>
            <li>Inner 3</li>
            <li>Inner 4</li>
            <li>Inner 5</li>
        </ul>
    </li>
    <li><ul class="inner"><li class="parent">Outer 6</li></ul></li>
</ul>

CSS

.inner li {
    margin-left: 8px;
}
.inner li.parent {
    margin-left: 0px;
}

JavaScript

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