JSFiddle - React, Tailwind, and code Playground

by Gabriel Esquivel

HTML

<div class="demo">

<ul id="sortable1" class="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
    
    <ul id="sortable2" class="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
    
        <ul id="sortable3" class="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span...

CSS

.sortable { list-style-type: none; margin: 0; padding: 0;  clear:both; height:50px;}
.sortable li { 
    cursor:pointer; margin: 0 3px 3px 3px; 
    padding: 0.4em; padding-left: 1.5em; 
    font-size: 12px; height: 18px; display:block; float:left;
}
.sortable li span { position: absolute; margin-left: -1.3em; }

#sortable1 li{ color: green;}
#sortable2 li{ color: blue;}
#sortable3 li{ color: black;}

/*#sortable1 li.group2{color:red;}
#sortable2 li.group1{color:red;}
#sortable2 li.group1{color:red;}*/
ul.sortable li.moved{color:red !important;}

JavaScript

//for coloring
$('#sortable1 > li').addClass('group1');
$('#sortable2 > li').addClass('group2');
$('#sortable3 > li').addClass('group3');

$("ul.sortable").sortable({
    revert: true,
    connectWith: 'ul.sortable',
    receive: function(event, ui) {
        var $item = $(ui.item);

        if($item.hasClass('moved')) {
            $(ui.sender).sortable('cancel');
        }
$item.addClass('moved');

 $("ul, li").disableSelection();
        
//http://stackoverflow.com/questions/9282915/jquery-sortable-how-prevent-a-list-moved-to-other-connected-lists