I originally posted this on the freewebsfarms.com forum.

Mootools is the latest incarnation from the Mad4Milk team who brought us MooFX javascript library and Mooglets. Mootools takes the best from prototype and MooFX and makes one lean and powerful little javascript library to do some amazing effects. I plan on posting more examples of mootools usage once I figure out more. The current documentation and examples are sparse, which is where this example comes in.

Here’s something thats a hack of the draggable windows from mooglets mixed in with the goodness of the new Mootools. It was inspired by mooglets windows as well as the mootools drag drop example by Jonathan Snook.

FIRST: add something like this to your styles.

.dragger {width:100px;background-color:#EFE;border:1px solid pink;margin: 2px; padding: 2px;}
.container {background-color: #66CCFF; width: 110px; height: 200px;border:1px solid pink;position:relative;z-index:50;padding:4px;}

SECOND: in the head add something like this. Obviously this comes after you’ve included the latest mootools script.

<script type="text/javascript">

var indexLevel = 1;

function dragContainerInit(el){

var fadeIn = new fx.Opacity(el.parentNode, {duration:300});

var dragContainerOptions = {

handle: el,

onStart: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(1,.5);
indexLevel++;
el.parentNode.style.zIndex = indexLevel;
}.bind(this),

onComplete: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(.5,1);

}.bind(this)
};

el.style.cursor = 'move';

el.parentNode.makeDraggable(dragContainerOptions);

}

window.onload=function()
{

/* setup draggables */

var draggables = document.getElementsBySelector('.dragger');
draggables.each(function(el){dragContainerInit(el);});

}
</script>

THIRD: In your HTML, add something simple like this.

<div class="container">
<div class="dragger">Drag me</div>
</div>

<div class="container">
<div class="dragger">Drag me 2</div>
</div>

This should give you draggable boxes with a nice transparency fade when dragging the handle.

LIVE EXAMPLE

NEXT EXAMPLE: Mootools table row and column highlighting.