Bride of Windows
See the demo page for the finished version of the code.Like winMoveDragStop(),
the winResizeDragStop()
function ends the drag operation when the mouse button is released.
function winResizeDragStop(event) { winCtrl.inResizeDrag = false; // Remove mousemove and mouseup event captures on document. if (browser.isIE) { document.onmousemove = null; document.onmouseup = null; } if (browser.isNS) { document.removeEventListener("mousemove", winResizeDragGo, true); document.removeEventListener("mouseup" , winResizeDragStop, true); } }
It clears the winCtrl.inResizeDrag
flag and, like its move
counterpart, removes the capture of the document mousemove
and
mouseup
events.
Conclusion
While the script in this example is somewhat long, and this has been a very detailed look at it, you should find that the individual techniques used are fairly simple. Hopefully, you'll be able to apply many of the concepts discussed here in creating other useful and dynamic effects for your web pages.