Hot Effect: MooTools Drag Opacity

As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is dragging. Why not double the awesomeness of Element dragging by adding fading?

The MooTools JavaScript

window.addEvent('domready',function() { var z = 2; $$('.draggable').each(function(el) { var drag = new Drag.Move(el,{ grid: false, preventDefault: true, onStart: function() { el.setStyle('z-index',z++).fade(0.5); }, onComplete: function() { el.fade(1); } }); }); });

The code itself is quite simple -- we use Drag.Move's onStart and onComplete events to begin and end the fading. We've chosen to fade to the desired opacity level over a given duration because a subtle fade is a bit less drastic. We could simply use set('opacity','0.5') if we wanted an immediate fade.

I consider the above effect a "cheap" way to increase the coolness of element dragging. Very little overhead and just another effect to take your website to the next level!