JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<div id="draggable">
    <div id="1">Box #1</div>
    <div id="2">Box #2</div>
    <div id="3">Box #3</div>
    <div id="4">Box #4</div>
</div>

CSS

#draggable, #droppable { 
    width: 200px; 
    height: 100px; 
    padding: 2em; 
    margin: 10px; 
    border:1px solid; 
}
.selected { 
    background-color:grey;
}

JavaScript

$('body').on('click', '#draggable DIV', function () {
    $(this).toggleClass('selected');
});
function log (prefix, obj, elem, ui) {
    console.log(prefix, obj.id, elem.attr('id'), ui.helper.attr('id'));
}    
function bindDraggable(obj, elem) {
    obj.id = elem.attr('id');
    elem.draggable({
        multiple: function (ev, ui) {
            log('app:multiple', obj, elem, ui);
        },
        start: function (ev, ui) {
            log('app:start', obj, elem, ui);
        },
        drag: function (ev, ui) {
            log('app:drag', obj, elem, ui);
        },
        stop: function (ev, ui) {
            log('app:stop', obj, elem, ui);
        }
    });
}
bindDraggable({}, $('#1'));
bindDraggable({}, $('#2'));
bindDraggable({}, $('#3'));
bindDraggable({}, $('#4'));

$.ui.plugin.add("draggable", "multiple", {
    start: function (ev, ui) {
        console.log('plugin:start', ui.helper.attr('id'))
    },
    drag: function (ev, ui) {
        var i = this.data('draggable');
        $('.selected').not(this).each(function () {
            var me = $(this).data('draggable');
            me._mouseDrag(ev, true);
        });
        console.log('plugin:drag', ui.helper.attr('id'))
    },
    stop: function (ev, ui) {
        console.log('plugin:stop', ui.helper.attr('id'))
    }
});