// dragcode2.js - fixing ie bug not allowing child nodes of draggable node to move
//              - draggable elements must contain the drag in their ids
// dragcode.js - author mike capstick 011006
// this drag n drop library consists of 3 functions
// grabber() - which responds to a mousedown on a suitably styled object
// mover()   - which responds to a mousemove operation on the object
// dropper() - which responds to a mouseup on the dragged object

//  Object Dragging can only be done if the position type, top and left properties are set. 
//  With this library this can be done by either setting them inline, for example 
//  <div id='frog'style='position:absolute;top;50px;left:50px;'>object</div>
//    or via the window.onload function, for example,
//  document.getElementById('frog').style.position='absolute'; etc etc

//  dropper() also calls a function objectdropped() which must exist in the calling page.
//  It may be empty but can be used to perform any desired actions caused by relocation of the object 
//  such as checking if the dragged object is in a desired location.


var diffX, diffY, theElement;

function grabber(event){

  if (document.all)  // if this IE use ie code else use w3c code
       {
        theElement = window.event.srcElement;
        // ie fix - 081006 - IE cannot drag child elements of draggable containers 
        // Move up through dom till we reach a node with a draggabble id containing a 'drag'
        // Get the parent of any node whose id does not contain the word drag
        while (theElement.getAttribute('id').indexOf('drag')==-1)
              {theElement=theElement.parentNode;}
       }
  else {theElement = event.currentTarget; }

  var posX = parseInt(theElement.style.left);  //current left position of theElement 
  var posY = parseInt(theElement.style.top);

if (document.all)
   {diffX = window.event.clientX - posX;
    diffY = window.event.clientY - posY;
    document.attachEvent("onmousemove",mover);  // attach the mover function when mouse moves
    document.attachEvent("onmouseup",dropper);  // attach the dropper function when mouse released
    window.event.cancelBubble=true;             // stop any 'event bubbling'
    window.event.returnValue=false;}
else{diffX = event.clientX - posX;
     diffY = event.clientY - posY;
     document.addEventListener("mousemove", mover, true);
     document.addEventListener("mouseup", dropper, true);
     event.stopPropagation();
     event.preventDefault();}
}

function mover(event){
   theElement.style.left = (event.clientX - diffX) + "px";
   theElement.style.top = (event.clientY - diffY) + "px";

   if (document.all)
      {window.event.cancelBubble=true;
       window.event.returnValue=false;}
   else{event.stopPropagation();
        event.preventDefault();  }
}

function dropper(event){
if  (document.all)
    {document.detachEvent("onmousemove",mover);
     document.detachEvent("onmouseup",dropper);
     window.event.cancelBubble=true;
     window.event.returnValue=false;}
else{document.removeEventListener("mouseup", dropper, true);
     document.removeEventListener("mousemove", mover, true);
     event.stopPropagation();
     event.preventDefault(); }

// run this function check when object dropped, function must exist
  objectdropped();
}