JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<div id="draggables">
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
</div>
 
<div id="droppables">
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
</div>

CSS

#draggables {
	height: 100px;
	position: relative;
} 
	#draggables DIV {
		background: #78BA91;
		cursor: move;
		height: 50px;
		left: 10px;
		position: absolute;
		top: 10px;
		width: 50px;
	}
	 
#droppables DIV {
	background: #6B7B95;
	float: left;
	height: 100px;
	margin: 10px;
	width: 100px;
}

JavaScript

window.addEvent('domready', function(){

	$$('#draggables DIV').makeDraggable({

		droppables: $$('#droppables DIV'),

		onEnter: function(draggable, droppable){
			droppable.setStyle('background', '#E79D35');
		},

		onLeave: function(draggable, droppable){
			droppable.setStyle('background', '#6B7B95');
		},

		onDrop: function(draggable, droppable){
			if (droppable){
				draggable.destroy();
				droppable.morph({
					'height': droppable.getStyle('height').toInt() + 30,
					'background-color' : ['#E79D35', '#6B7B95']
				});
			} else {
				draggable.setStyle('background', '#C17878');
			}
		}

	});

});