JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class='container'>
    <h3>.sort-me:</h3>
    <div class='sort-me'>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </div>
    <div class='sort-me'>
        <li>Lorem</li>
        <li>ipsum</li>
        <li>dolor</li>
    </div>
    
    <h3>#also-sort-me:</h3>
    <div id='also-sort-me'>
        <li>All</li>
        <li>your</li>
        <li>base</li>
    </div>
</div>

CSS

li {
    background-color:#ffcb05;
    margin:5px;
    padding:5px;
    cursor:move;
}
div:not(.container) {
    background-color:#00274c;
    min-height: 30px;
    margin: 10px;
    padding:10px;
    width:200px;
    vertical-align:top;
    display:inline-block;
}

JavaScript

$(function(){
    // Could also be ['.sort-me', '#also-sort-me']
    $('.sort-me').sortable({connectWith: '.sort-me, #also-sort-me'});
    $('#also-sort-me').sortable(); // This one isn't connected back.
});