hmmmm, now it's time for mootools, ..and then I should make a list of drag&drop in all javascript libraries, some of them I have already explained in my "awesome" blog, ...because you all think is awesome, don't you??.
Let's think about 10 balls and 2 baskets, so the balls can be dragged to any of the baskets. Let's have an easy html code to represent this:
<div id="balls"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div id="baskets">
<div class="basket"></div>
<div class="basket"></div>
</div>o not forget to apply style to give them a form. Something like this:
#balls{
float:left;
}
.ball{
width:100px;
height:100px;
background-image:url(ball.png);
}
#baskets{
float:left;
}
.basket{
width:100px;
height:100px;
float:left;
padding:0px;
margin:5px
background-image:url(basket.png);
}
Now with javascript let's define the objects draggable (the one to move, that is the ball), and droppable(the one to drop, that is each basket):
$$('#balls div').each(function(drag){
new Drag.Move(drag, {
droppables: $$('#baskets div')
});
});This means, add the drag capability to the ball elements to being drop into the baskets. Now let's make the basket vibrates when ball on top, empty when ball is not drop in, and basket with ball when ball has been dropped in (All effects will be done with images for simplicity):
$$('#baskets div').each(function(drop){
drop.addEvents({
'over': function(el, obj){
this.setStyle({'background-image','url(BasketVibrating.png)'});
},
'leave': function(el, obj){
this.setStyle({'background-image','url(basket.png)'});
},
'drop': function(el, obj){
this.setStyle({'background-image','url(basketWithBall.png)'});
});
}
});
});...and that's it!!. It is just a matter to see how to assign drag or drop capabilities to objects, and being able to set over, leave or drop events for droppable objects...
Then of course you can make it complex, for example when moving the ball to the basket you can use
Fx.Transitions.Bounce to make it bounce....for example. There are soo many interesting things about
Mootools FXohhh, yes, I almost forget, ..the list of articles about drag&drop for all libraries..., hmmm, let's leave it for tomorrow :)
