JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<div class="draggable one" data-scope="blue"></div>
<div class="draggable two" data-scope="red"></div>
<div class="draggable three" data-scope="green"></div>

<div class="droppable" data-scope="blue"></div>
<div class="droppable" data-scope="blue,red"></div>
<div class="droppable" data-scope="blue,red,green"></div>

CSS

.draggable.one { background-color: blue; }
.draggable.two { background-color: red; }
.draggable.three { background-color: green; }

.droppable { border: 2px dotted black; }

div { height: 20px; width: 20px; margin: 5px; }

JavaScript

$('.draggable').each(function(index, div) {
    var scope = $(this).attr('data-scope');
    $(div).draggable({
        start: function() {
            $(':not(.droppable[data-scope*=' + scope + '])')
                .droppable('option', 'disabled', true);
        },
        stop: function() {
            $('.droppable').droppable('option', 'disabled', false);
        },
        revert: true
    });
});


$('.droppable').droppable({      
    drop: function(event, ui) {
        $(this).css('backgroundColor', $(ui.draggable).css('backgroundColor'));           
        $(ui.draggable).remove();
    }
});