JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

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

<ul class="list">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
</ul>

<ul class="list">
    <li>Elephant</li>
    <li>Lion</li>
    <li>Zebra</li>
</ul>

CSS

.list {
    background-color: gray;
    padding: 10px;
    margin: 10px;
    list-style-type: none;
    float: left;
    min-width: 200px;
}

.list li {
    background-color: yellow;
    padding: 5px;
    margin: 10px 0;
}

JavaScript

$('.list').sortable({
		connectWith: '.list'
})