MooTools Drag

Using MooTools 1.2 for Drag

<style>
#popbox1{position:absolute;top:0; left:0}
#popbox2{position:absolute;top:0; left:120px}
#popbox3{position:absolute;top:0; left:240px}
.drag_me{border:1px solid #ddd; width:100px; height:100px;background:#eee}
.drag_me_handle{height:20px;background:#069}
</style>
<div class=drag_me id=popbox1></div>
<div class=drag_me id=popbox2></div>
<div class=drag_me id=popbox3></div>
<script> 
window.addEvent(domready, function() {

var z = 1;
$$(.drag_me).each(function(el) {
var drag_me_handle = new Element(div,{class: drag_me_handle}).inject(el,top);
var myDrag = new Drag.Move(el, {
handle: drag_me_handle,
onStart: function(el) {el.setStyle(z-index,z++); },
onDrop: function(el) {el.highlight(#fff);}
});

el.addEvent(click, function(){
el.setStyle(z-index,z++);
});

});
});
</script>

handle - option

Handle adds a handle to your draggable element. The handle becomes theonly element that will accept the ‘grab,’ letting you use the rest ofthe element for other things. To set up a handle, just call the element.

onStart - event

On start does what it says, fires an event on the start of drag. If youhave a long snap set, then this event wouldn’t fire until the mouse hadgone that distance.

onDrag - event

This event, onDrag, will fire continuously while you are dragging anelement.