JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<ul class="sort-bucket blue" id="list-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

<ul class="sort-bucket red" id="list-2">

</ul>

<ul class="sort-bucket green" id="list-3">

</ul>

CSS

.sort-bucket { float: left; margin: 1em; padding: 0; min-height: 10em; width: 5em; border: 1px solid #CCC;}
li {display: block; margin: 2px; padding: 2px 5px; border: 1px solid #EEE;}
.blue li {border-color: blue; color: blue;}
.red li {border-color: red; color: red;}
.green li {border-color: green; color: green;}

JavaScript

$( "ul.sort-bucket" ).sortable({
            connectWith: "ul",
            placeholder: "ui-state-highlight",
            cursor: "move"
});