mootools

References to Documentation

1. Native/Element.js#$
2. Native/Element.js#$$
3. Drag/Drag-Move.js#Drag.Move
4. Element/Element-Event.js#Element.addEvent
5. Native/Element.js#Element.setStyle

var droppables = $$('div.dropper');
 
var container = $('containment');
 
new Drag.Move('dragger', {'container': container, 'droppables': droppables});
 
droppables.addEvent('over', function(){
	this.setStyle('background-color', '#000');
});
 
droppables.addEvent('leave', function(){
	this.setStyle('background-color', '#ff3300');
});
 
droppables.addEvent('drop', function(){
	this.setStyle('background-color', '#face8f');
});

<div id="containment">
	<div id="dragger"><!-- --></div>
 
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
	<div class="dropper"><!-- --></div>
</div>

#containment {
	height: 210px;
	width: 330px;
	background: #eee;
	position: relative;
}
 
#dragger {
	height: 20px;
	width: 20px;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
}
 
div.dropper {
	margin-left: 10px;
	margin-top: 10px;
	float: left;
	height: 40px;
	width: 30px;
	background: #ff3300;
}