JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='sib1' class='container'>sib1</div>
<div id='sib2' class='container'>sib2</div>

<div id='redBox'></div>

CSS

div#sib1 {
    position: absolute;
    top:40px;
    left:40px;
    border:1px solid black;
    width:200px;
    height:200px;
    background-color:beige;
}

div#sib2 {
    position: relative;
    top:50px;
    left:50px;
    border:1px solid black;
    width:100px;
    height:100px;
    background-color:beige;
}
div#redBox {
    position: absolute;
    width: 40px;
    height:40px;
    border:1px solid black;
    background-color: red;
    left:250px;
    top:50px;
}

JavaScript

var container_dropOps = {	
    drop   : dropHandler, 
	accept : '#redBox',		
	greedy : false
};

function dropHandler() {
    console.log("droping into " + this.id);
}

$(function(){   // ready
    
   $('#redBox').draggable();
   $('.container').droppable(container_dropOps);
    
});