JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

// Doesn't work reliably with flexbox.<br>
// It's especially hard to drop layer 6 between layers one and two

<ul>
    <li>layer one</li>
    <li>layer two</li>
    <li>layer three</li>
    <li>layer four</li>
    <li>layer five</li>
    <li>layer six</li>
</ul>

CSS

ul {
    display: -webkit-flex;
    display: -ms-flexbox; 
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
li {
    border: 1px solid black;
    padding: 1em;
}
.ui-sortable-helper {
    outline: 1px dashed green;
}

JavaScript

$( "ul" ).sortable();