| 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>
|