JSFiddle - React, Tailwind, and code Playground

by briansol

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<h2>Pool</h2>
<ul id="sortable" class="cnxsort">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<h2>Droppers</h2>
<ul id="sortable2" class="cnxsort">
    <li>Item a</li>
    <li>Item b</li>
    <li>Item c</li>
</ul>
<ul id="sortable3" class="cnxsort">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

CSS

.cnxsort { list-style: none; padding: 0; }
.cnxsort li { border: 1px solid black; }

/* example for http://bugs.jqueryui.com/ticket/4904#comment:9 */

JavaScript

$( "#sortable, #sortable2, #sortable3" ).sortable({
connectWith: ".cnxsort"
    , beforeStop: function(ev, ui) {
			//disable dropping back into the pool list, defined by id="sortable" on the ul
			if ($(ui.item).parent()[0].id=="sortable" && $(ui.placeholder).parent()[0] != this) {
				$(this).sortable('cancel');
			}
		}
}
);