JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div style="margin-bottom:20px;">
    <div id="1" class="DragItem drag1">I am 1</div>
    <div id="2" class="DragItem drag1">I am 2</div>
    <div id="3" class="DragItem drag2">I am 3</div>
    <div id="4" class="DragItem drag2">I am 4</div>
</div>
<div>
    <div data-id="123" class="DropItem drop1">I accept 1, 2 and 3</div>
    <div data-id="23" class="DropItem drop2">I accept 2 and 3</div>
    <div data-id="34" class="DropItem drop3">I accept 3 and 4</div>
    <div data-id="1234" class="DropItem drop4">I accept all</div>
</div>

CSS

.DragItem {
    display:inline-block;
    height:50px;
    width:50px;
    background-color:#E1F3FA;
    border:1px solid #A6DAFF;
    color:#20538A;
    padding:5px;
}
.DropItem {
    height:50px;
    background-color:#FFF3DE;
    border:1px solid #F0D099;
    color:#91610D;
    margin-bottom:10px;
    padding:5px;
}
.DropTargetValid {
    background-color:#C7FFC2;
}
.DropTargetInvalid {
    background-color:#FCD9D9;
}

JavaScript

$(".DragItem").draggable({
    revert: 'invalid',
    helper: "clone"
});

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop2").droppable({
    accept: '#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop3").droppable({
    accept: '#3,#4',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});

$(".drop4").droppable({
    accept: '.DragItem',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
    }
});