<public:attach event="onmousedown" onevent="engage()" />
<public:attach event="onmousemove" onevent="dragIt()" />
<public:attach event="onmouseup"   onevent="release()" />
<public:attach event="onmouseover" onevent="setCursor()" />
<public:attach event="onmouseout"  onevent="release();restoreCursor()" />

<script type="text/javascript">
// global declarations
var offsetX = 0;
var offsetY = 0;
var selectedObj;
var oldZ, oldCursor;

// initialize drag action on mousedown
function engage() {
   selectedObj = (element == event.srcElement) ? element : null;
   if (selectedObj) {
      offsetX = event.offsetX - element.document.body.scrollLeft;
      offsetY = event.offsetY - element.document.body.scrollTop;
      oldZ = element.runtimeStyle.zIndex;
      element.style.zIndex = 10000;
      event.returnValue = false;
   }
}

// move element on mousemove
function dragIt() {
   if (selectedObj) {
      selectedObj.style.pixelLeft = event.clientX - offsetX;
      selectedObj.style.pixelTop = event.clientY - offsetY;
      event.cancelBubble = true;
      event.returnValue = false;
   }
}

// restore state on mouseup
function release() {
   if (selectedObj) {
      selectedObj.style.zIndex = oldZ;
   }
   selectedObj = null;
}

// make cursor look draggable on mouseover
function setCursor() {
   oldCursor = element.runtimeStyle.cursor;
   element.style.cursor = "hand";
}

// restore cursor on mouseout
function restoreCursor() {
   element.style.cursor = oldCursor;
}
</script>
