-->
Bookmark and Share

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.