JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

<div id="d1" class="b">d1</div>
<div id="d2" class="b">d2</div>

<div id="info"></div>

<div id="drag" class="b">drag</div>

CSS

.b {
    background-color: hsla(0, 100%, 75%, 0.75);
    border: 1px black solid;
}
#d1 { 
    position: absolute;
    width: 200px;
    height: 200px;
}
#d2 { 
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 200px;
}

#drag { 
    position: absolute;
    top: 220px;
    left: 20px;
    width: 50px;
    height: 50px;
}

#info {
    position: absolute;
    top: 0px;
    right: 0px;
}

JavaScript

/* droppable sibs both fire */

var info = $("#info");

$("#drag").draggable();

$("#d1").droppable({
    greedy: true,
    drop: function(event, ui){
        info.append("dropped [d1] <br>");
    }
});

$("#d2").droppable({
    greedy: true,
    drop: function(event, ui){
        info.append("dropped [d2] <br>");
    }
});