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>
view demo
handle - option
Handle adds a handle to your draggable element. The handle becomes the
only element that will accept the ‘grab,’ letting you use the rest of
the 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 you
have a long snap set, then this event wouldn’t fire until the mouse had
gone that distance.onDrag - event
This event, onDrag, will fire continuously while you are dragging an
element.