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

ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }
.sort-bucket { float: left; margin: 1em; padding: 0; min-height: 10em; 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({
            handle: ".handle",
            connectWith: "ul",
            placeholder: "ui-state-highlight"
        })
        .selectable({ filter: "li", cancel: ".handle" })
        .find( "li" )
        //.addClass( "ui-corner-all" )
        .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );