Inside Technique : DHTMLLib Windows : The Code

Below is a commented version of the windowing script. When reviewing the code you will notice we do a simple browser test for Macintosh Internet Explorer 4.0 in the startDrag() function. We need to do this test because the Mac version of Internet Explorer returns incorrect values for the offsetX and offsetY properties. The values returned are offset from the upper-left of the window, not the upper-left of the positioned element. Instead, for the Mac IE, we use the value 0. This causes the origin of the drag to always be the upper-left corner of the window. In the other browsers, we accurately represent the mouses original position on the title text.

Also, in the onload event handler, we check for the all collection as a test of whether we are in a DHTML-based browser (remember, even Netscape has an all collection when using DHTMLLib). We do this test so no script errors occur in downlevel browsers. In downlevel browsers, the window's are all rendered as tables in flow.

// Global counter to always bring the clicked window to the top.
zCounter=1

function startDrag() {
 // Dragging only supported when page is loaded
 if (document.readyState=="complete") {
  // The anchor sets _dragWindow when the mouse goes down
  // When the event bubbles to the document, we can check
  // if a window is being dragged
  if (window._dragWindow) { 
   window._dragging=true  // Start Dragging
   // Cache object being dragged
   window._dragObject = document.all[window._dragWindow]
   // Don't use offsets on Mac IE
   window._dragObject._mouseLeft = (ie4Mac) ? 0 : event.offsetX
   window._dragObject._mouseTop = (ie4Mac) ? 0 : event.offsetY
   // Bring to top
   window._dragObject.style.zIndex=zCounter++
  } else
   if (window._current)  // Not dragging, but clicked on a window
    window.document.all[window._current].style.zIndex=zCounter++
  window._current=null
  // Need to return value to prevent default action in Netscape
  return window._dragWindow==null
 }
}

function moveMe() {
 // If dragging, move to follow mouse
 if (window._dragging) {
  window._dragObject.style.pixelTop =  document.body.scrollTop + 
     event.clientY - window._dragObject._mouseTop
  window._dragObject.style.pixelLeft = document.body.scrollLeft + 
     event.clientX - window._dragObject._mouseLeft		
 }
}

function clearDrag() {
 // Mouse goes up, clear drag objects
 window._dragging=false
 window._dragWindow =window._dragObject= null
}

function doLoad() {
 setup()
 // Check if DHTML support
 if (document.all!=null) { 
  document.onmousedown = startDrag;
  document.onmousemove = moveMe
  document.onmouseup = clearDrag
  document.all.wIntro.onmousedown = document.all.wBanner.onmousedown = 
    document.all.wCode.onmousedown = new Function("window._current=this.id")
  document.ondragstart = new Function("return false")
 }
}
window.onload = doLoad;

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.