JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div id="container" style="position:relative">

<div id="task1" class="task">
    Task 1</a></div>
<div id="task2" class="task">
    Task 2</a></div>
<div id="task3" class="task">
    Task 3</a></div>
<div id="task4" class="task">
    Task 4</a></div>
<div id="task5" class="task">
    Task 5</a></div>

</div>

CSS

#container .ui-droppable{
    padding:5px;
}
#container .ui-draggable{
    padding:5px;
    background-color:#FFF9D8;
}
#container .ui-draggable-dragging, .dragging{
    background-color:#91B168;
    font-color:#202020;
    z-index:1;
    opacity:0.3;
}
#container .ui-selecting { background: #FECA40; }
#container .ui-selected { background: #F39814; color: white;  z-index:1;  }

JavaScript

var selected = $([]);     // list of selected objects
    var lastselected = '';    // for the shift-click event

    $(function() {
        $("#container").selectable(); // setup the selectables

        // since the draggable will kill the selectable click event, chain in our own
        $("#container .task").click(function(evt){
            // who am i
            id = $(this).attr("id");

            // check keys
            if ((evt.shiftKey) && (lastselected != '')) {
                // loop all tasks, select area from this to lastselected or vice versa
                bSelect = false;
                $(".task").each(function() {
                    if ($(this).is(':visible')) {
                        if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
                            bSelect = !bSelect;    

                        if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
                            if (!$(this).hasClass("ui-selected"))
                                   $(this).addClass("ui-selected");
                        }
                           else
                               $(this).removeClass("ui-selected");
                    }
                });
                return;
            }
            else if (!evt.ctrlKey)
                $(".ui-selected").removeClass("ui-selected"); // clear other selections

            if (!$(this).hasClass("ui-selected")) {
                   $(this).addClass("ui-selected");
                   lastselected = id;
            }
            else {
                $(this).removeClass("ui-selected");
                lastselected = '';
            }
        });

        $("#container .task").draggable({
            axis: "y",
            revert: "invalid",
            containment: '#container',
            start: function(ev, ui) {
                $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
                selected...