mootools

References to Documentation

1. Native/Element.js#$$
2. Native/Array.js#Array.each
3. Drag/Drag-Move.js#Drag.Move
4. Element/Element-Event.js#Element.addEvent
5. Native/Element.js#Element.setStyles
6. Effects/Fx-Style.js#Element.effect
7. Native/Element.js#Element.remove
8. Effects/Fx-Style.js#Fx.Style.start
9. Native/Element.js#Element.getStyles

var fx = [];
 
$$('#draggables div').each(function(drag){
	new Drag.Move(drag, {
		droppables: $$('#droppables div')
	});
 
	drag.addEvent('emptydrop', function(){
		this.setStyle('background-color', '#faec8f');
	});
});
 
$$('#droppables div').each(function(drop, index){
	fx[index] = drop.effects({transition:Fx.Transitions.Back.easeOut});
	drop.addEvents({
		'over': function(el, obj){
			this.setStyle('background-color', '#78ba91');
		},
		'leave': function(el, obj){
			this.setStyle('background-color', '#1d1d20');
		},
		'drop': function(el, obj){
			el.remove();
			fx[index].start({
				'height': this.getStyle('height').toInt() + 30,
				'background-color' : ['#78ba91', '#1d1d20']
			});
		}
	});
});
 

 
<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>
 

#draggables {
	height: 100px;
	position: relative;
}
 
#draggables div {
	top: 10px;
	left: 10px;
	width: 50px;
	height: 50px;
	cursor: move;
	background: #c17878;
	position: absolute;
}
 
 
#droppables div {
	float: left;
	margin: 10px;
	width: 100px;
	height: 100px;
	background: #1d1d20;
}