JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='parent' class='container'>
    parent
    <div id='child' class='container'>child</div>
http://jsfiddle.net/stevea/gMwZn/5/#update</div>

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

CSS

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

div#child {
    position: relative;
    top:60px;
    left:60px;
    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 : true
};

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

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