JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='container' ></div>

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

CSS

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


div#redBox {
    position: absolute;
    width: 40px;
    height:40px;
    border:1px solid black;
    background-color: red;
    left:250px;
    top:50px;
}
div.greenBorder {
    border: 3px solid green !important;
}

JavaScript

var container_dropOps = {	 
	drop : dropHandler,		
	accept : '#redBox',	
    hoverClass :'greenBorder',
	greedy : true
};

function dropHandler(e,ui) {
    console.log("droping into " + this.id);
    ui.draggable.appendTo('#container');
    
}

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