Launching off our foundation from the previous recipe, we now get ready to have window widgets magically switch places. This will act like a game of musical chairs where when one widget moves into the place of a second, the second takes the place of the first. And unlike musical chairs, no widget loses and has to sit down until the next round.
The structure of the Drag.Move() object is the same. Added in this recipe is the functionality of the onEnter and onLeave events. Note how the hitters now have a class added upon entering and that class removed upon leaving to create a highlight effect. This tells the user they have dragged an item to a hittable zone.
$$('.widget').each(function(el) {
whereami[el.get('id')] = el.getCoordinates();
var widget_id = el.get('id');
new Drag.Move(widget_id,{
droppables: $$('.hitter'),
onStart: function(el) {
el.setStyle('opacity',.7);
},
onDrop: function(el,hitter) {
el.setStyle...