JSFiddle - React, Tailwind, and code Playground

by Andrei Picus

HTML

<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<button id="button">click to change scopes</button>

CSS

div {
    float: left;
    margin-right: 10px;
    width:30px;
    height:30px;
}
.a {
    border: 1px solid #000;
}
.b {
    border: 1px solid #ff0000;
}
.c {
    border: 1px solid #0000ff;
}

JavaScript

var scope1 = "scope1",
    scope2 = "scope2";

$(".a, .b").draggable({
    scope: scope1,
    revert: "invalid"
});
$(".c").droppable({
    scope: scope1
});

$("#button").click(function () {
    $(".a").draggable("option", "scope", scope2);
    $(".c").droppable("option", "scope", scope2);
});