JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    <p>Available Boxes (click to select multiple boxes)</p>
    <ul id="draggable">
        <li>Box #1</li>
        <li>Box #2</li>
        <li class="notThis">notThis #3</li>
        <li>Box #4</li>
    </ul>
    <p>My Boxes</p>
    <ul id="droppable"></ul>
</div>

CSS

.demo {
    width: 620px
}
ul {
    width: 400px;
    height: 150px;
    padding: 2em;
    margin: 10px;
    color:#ddd;
    list-style: none;
}
ul li {
    cursor: pointer;
}
#draggable {
    background: #444;
}
#droppable {
    background: #222;
}

JavaScript

$(document).ready(function () {

    var selectedClass = 'ui-state-highlight',
        clickDelay = 600,
        // click time (milliseconds)
        lastClick, diffClick; // timestamps

    $("#draggable li").not(".notThis")
    // Script to deferentiate a click from a mousedown for drag event
    .bind('mousedown mouseup', function (e) {
        if (e.type == "mousedown") {
            lastClick = e.timeStamp; // get mousedown time
        } else {
            diffClick = e.timeStamp - lastClick;
            if (diffClick < clickDelay) {
                // add selected class to group draggable objects
                $(this).toggleClass(selectedClass);
            }
        }
    })
        .draggable({
        revertDuration: 10,
        // grouped items animate separately, so leave this number low
        containment: '.demo',
        start: function (e, ui) {
            ui.helper.addClass(selectedClass);
        },
        stop: function (e, ui) {
            // reset group positions
            $('.' + selectedClass).css({
                top: 0,
                left: 0
            });
        },
        cancel: ".notThis",
        drag: function (e, ui) {
            // set selected group position to main dragged object
            // this works because the position is relative to the starting position
            $('.' + selectedClass).css({
                top: ui.position.top,
                left: ui.position.left
            });
        }
    });

    $("#droppable, #draggable").not(".notThis").sortable().droppable({
        drop: function (e, ui) {
            $('.' + selectedClass).appendTo($(this)).add(ui.draggable) // ui.draggable is appended by the script, so add it after
            .removeClass(selectedClass).css({
                top: 0,
                left: 0
            });
        },
        cancel: ".notThis",
    });

});