Menu
Home
Demo Index
DHTML Lib
DHTML Windows
SiteExperts.com Sponsor

Defining Windows
Windows are defined as tables within absolutely positioned DIV's:
<DIV ID=windowName 
     STYLE="layer-background-color: lightgrey; background: lightgrey; z-index:0; position: absolute;
            left: 100px; width:500">
  <TABLE WIDTH=500 BORDER=1 CELLSPACING=0>
  <TR>
    <TD BGCOLOR=navy>
      <A CLASS=windowTitle 
         ONCLICK="return false" 
         ONMOUSEDOWN="window._dragWindow = window.document.all.windowName" 
         HREF="#">
      <FONT COLOR=white FACE="verdana" SIZE=-2>
        Title Bar
      </FONT>
      </A>
    </TD>
  </TR>
  <TR>
    <TD>
      Window Contents
    </TD>
  </TR>
  </TABLE>
</DIV>

The Code
The script for creating drag-and-drop windows is below.
<SCRIPT SRC="/dhtmllib2.js"></SCRIPT>
<SCRIPT>
<!--
zCounter=1
function startDrag() {
 if (document.readyState=="complete") {
  if (window._dragWindow) {
   window._dragging=true
   window._dragObject = document.all[window._dragWindow]
   window._dragObject._mouseLeft = event.offsetX
   window._dragObject._mouseTop = event.offsetY
   window._dragObject.style.zIndex=zCounter++
  } else
   if (window._current)
    window.document.all[window._current].style.zIndex=zCounter++
  window._current=null
 }
 return false
}

function moveMe() {
 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() {
 window._dragging=false
 window._dragWindow =window._dragObject= null
}

function doLoad() {
 setup()
 document.onmousedown = startDrag;
 document.onmousemove = moveMe
 document.onmouseup = clearDrag
 document.all.windowName1.onmousedown = 
   document.all.windowName2.onmousedown  = new Function("window._current=this.id")
 document.ondragstart = new Function("return false")
}
window.onload = doLoad;
//-->
</SCRIPT>