mootools

References to Documentation

1. Native/Element.js#$
2. Effects/Fx-Style.js#Element.effect
3. Native/Element.js#$$
4. Native/Array.js#Array.each
5. Element/Element-Event.js#Element.addEvent
6. Native/Element.js#Element.setStyles
7. Element/Element-Dimensions.js#Element.getCoordinates
8. Native/Element.js#Element.injectBefore
9. Element/Element-Event.js#Element.removeEvents
10. Native/Element.js#Element.remove
11. Native/Element.js#Element.clone
12. Effects/Fx-Style.js#Fx.Style.start
13. Native/Function.js#Function.pass
14. Drag/Drag-Move.js#Element.makeDraggable

var drop = $('cart');
var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
 
$$('.item').each(function(item){
 
	item.addEvent('mousedown', function(e) {
		e = new Event(e).stop();
 
		var clone = this.clone()
			.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
			.setStyles({'opacity': 0.7, 'position': 'absolute'})
			.addEvent('emptydrop', function() {
				this.remove();
				drop.removeEvents();
			}).inject(document.body);
 
		drop.addEvents({
			'drop': function() {
				drop.removeEvents();
				clone.remove();
				item.clone().inject(drop);
				dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
			},
			'over': function() {
				dropFx.start('98B5C1');
			},
			'leave': function() {
				dropFx.start('ffffff');
			}
		});
 
		var drag = clone.makeDraggable({
			droppables: [drop]
		}); // this returns the dragged element
 
		drag.start(e); // start the event manual
	});
 
});

<div id="items">
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s1.jpg)">
		<span>Shirt 1</span>
	</div>
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s2.jpg)">
		<span>Shirt 2</span>
	</div>
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s3.jpg)">
		<span>Shirt 3</span>
	</div>
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s4.jpg)">
		<span>Shirt 4</span>
	</div>
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s5.jpg)">
		<span>Shirt 5</span>
	</div>
	<div class="item" style="background-image:url(http://demos.mootools.net/demos/Drag.Cart/s6.jpg)">
		<span>Shirt 6</span>
	</div>
</div>
<div id="cart">
	<div class="info">Drag Items Here</div>
</div>

#items
{
	float: left;
	width: 525px;
	border: 1px solid #f9f9f9;
}
 
#cart
{
	float: right;
	width: 280px;
	background-color: #fff;
	border: 1px solid #f9f9f9;
	padding-bottom: 50px;
}
 
#cart .info
{
	color: #444;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
 
}
 
.item {
	float: left;
	position: relative;
	width: 150px;
	height: 175px;
	border: 1px solid #eee;
	margin: 10px;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	background-color: #fff;
	background-position: left top;
	background-repeat: no-repeat;
	cursor: move;
}
#cart .item {
	width: 75px;
	height: 75px;
	margin: 5px;
	background-position: -40px -22px;
	border-width: 1px;
	cursor: default;
}
 
.item span
{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 0.8em;
	font-weight: bold;
	width: 100%;
	text-align: center;
 
}