// Initialize all the variables that we’re going to use
  var curDrag, origX, origY;
  
  // Watch for any time that the user clicks down on an element
  document.onmousedown = function(e){
      // Normalize the Event object
      e = fixEvent( e );
  
      // Only drag elements that have a class of ‘draggable’
      if ( e.target.className = “draggable” ) {
          // The element that we’re currently dragging
          curDrag = e.target;
  
          // Remember where the cursor position started, and where the
          // element was located
          origX = getX( e ) + (parseInt( curDrag.style.left ) || 0);
          origY = getY( e ) + (parseInt( curDrag.style.top ) || 0);
  
          // Watch for the mouse to move, or life
          document.mousemove = dragMove;
          document.mouseup = dragStop;
      }
      
  };
  
  // Watch for the mouse to move
  function dragMove(e) {
      // Normalize the Event object
      e = fixEvent( e );
  
      // Set the new cursor position
      curDrag.style.left = getX(e) – origX + “px”;
      curDrag.style.top = getY(e) – origY + “px”;
  }
  
  // Look for the drag to end
  function dragStop(e) {
      // Normalize the Event object
      e = fixEvent( e );
  
      // Reset all of our watcher methods
      curDrag = document.mousemove = document.mouseup = null;
  }
  
  // Adjust the event object, to make it sane
  function fixEvent(e) {
      // Make all the IE-centric parameters be W3C-like
      if (!e) {
          e = window.event;
          e.target = e.srcElement;
          e.layerX = e.offsetX;
          e.layerY = e.offsetY;
      }
      return e;
  }