Feb
02
I’ve searched on the internet for a good, simple and working example of the Drag.Cart plugin for Mootools 1.2+ but I haven’t found a single one. This is what I mean: the original Ghost Drag demo for Mootools 1.1.
Here it is, a working example for Mootools 1.2+. Good luck and take a look at the actual documentation I’ve you need some more information.
The html
Shirt 1Shirt 2Shirt 3Shirt 4Shirt 5Shirt 6Drag Items Here
CSS
#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;
}
The Mootools
Activate the mootools below after the DOM is ready…
var list = $$('.item');
var drop = $('cart');
var dropFx = new Fx.Morph('cart', {duration: 200, transition: Fx.Transitions.Sine.easeOut});
list.each(function(item){
item.addEvent('mousedown', function(e){
var e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates())
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.inject(document.body);
var drag = new Drag.Move(clone, {
droppables: '.cart',
onDrop: function(element, droppable, event){
drop.removeEvents();
if(droppable){
drop.highlight('#7389AE');
dropFx.start({'background-color': '#FFFFFF'});
item.clone().inject(drop);
clone.dispose();
}else{
clone.dispose();
}
},
onEnter: function(){
dropFx.start({'background-color': '#98B5C1'});
},
onLeave: function(){
dropFx.start({'background-color': '#FFFFFF'});
}
});
drag.start(e); // start the event manual
});
});
