JSFiddle - React, Tailwind, and code Playground

by aherbst

HTML

<div class="draggable"></div>
<div class="droppable"></div>

CSS

.draggable {
    width: 100px;
    height: 100px;
    background-color: red;
}
.droppable {
    width: 200px;
    height: 200px;
    background-color: green;
}

JavaScript

$('.draggable').draggable();
$('.droppable').droppable({ drop: function() {alert('dropped');} });

$('.draggable').draggable('option','scope','foo');
$('.droppable').droppable('option','scope','foo');

/*jQuery.fn.extend({

    setDroppableScope: function(scope) {
        return this.each(function() {
            var currentScope = $(this).droppable("option","scope");
            if (typeof currentScope == "object" && currentScope[0] == this) return true; //continue if this is not droppable

            //Remove from current scope and add to new scope
            var i, droppableArrayObject;
            for(i = 0; i < $.ui.ddmanager.droppables[currentScope].length; i++) {
                var ui_element = $.ui.ddmanager.droppables[currentScope][i].element[0];

                if (this == ui_element) {
                    //Remove from old scope position in jQuery's internal array
                    droppableArrayObject = $.ui.ddmanager.droppables[currentScope].splice(i,1)[0];
                    //Add to new scope
                    $.ui.ddmanager.droppables[scope] = $.ui.ddmanager.droppables[scope] || [];
                    $.ui.ddmanager.droppables[scope].push(droppableArrayObject);
                    //Update the original way via jQuery
                    $(this).droppable("option","scope",scope);
                    break;
                }
            }
        });
    }
});

$('.draggable').draggable('option','scope','foo');
$('.droppable').setDroppableScope('foo');
//*/