JSFiddle - React, Tailwind, and code Playground

by lnrb0b

HTML

<ul id="all-colls-list" class="droptrue">
                <li class="sortedli sort-asc">Adam</li>
                <li class="sortedli">Tom</li>
                <li class="sortedli">James</li>
                <li class="sortedli">Joe</li>
                <li class="sortedli">Harry</li>
                <li class="sortedli">Richard</li>
              </ul>

<ul id="coll-selected-list" class="droptrue sort-drop">
              </ul>
              <ul id="coll-grouped-list" class="droptrue agg-drop">
              </ul>

CSS

#all-colls-list, #coll-selected-list, #coll-grouped-list { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
    #all-colls-list li, #coll-selected-list li, #coll-grouped-list li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }

JavaScript

$(function () {
    var lists = [{
        "listid": "#all-colls-list",
        "connectid": "#coll-selected-list, #coll-grouped-list",
        "drop": true
    }, {
        "listid": "#coll-selected-list",
        "connectid": "#all-colls-list",
        "drop": true
    },
    {
        "listid": "#coll-grouped-list",
        "connectid": "#all-colls-list",
        "drop": true
    }];

    $.each(lists, function (i, list) {
        $(list.listid).sortable({
            connectWith: list.connectid,
            dropOnEmpty: list.drop,
            receive: function (event, ui) {
                $("#all-colls-list li").css("background-image", "none");
            }
        });
    });

    $("#coll-selected-list").sortable({
        remove: function (event, ui) {
            //alert($(ui.item).text());
            var itemName = $(ui.item).text();
            if ($("#all-colls-list li:contains(" + itemName + ")").hasClass("selAdded")) {
                $("#all-colls-list li:contains(" + itemName + ")").css("background-color", "#fff").removeClass("selAdded");
                $(ui.item).remove();
            }
            //$("#all-colls-list li:contains(" + itemName + ")").hasClass("selAdded").remove();

        },
        receive: function (event, ui) {
            //alert($(ui.item).text());
            if ($(ui.item).hasClass("selAdded")) {
                //alert ('has class');
                $(ui.item).remove();
            }

                var itemName = $(ui.item).text();
                $("#coll-selected-list li:contains(" + itemName + ")").clone(true).addClass("selAdded").css("background-color", "#FC0").appendTo("#all-colls-list");

        }
    });
});