In this example, an instance of the Uize.Widget.Window.Draggable class is being used to implement a draggable window for a modal dialog. The window is not resizable (the corners and sides are NOT active), but it is draggable and can be moved around by clicking-and-dragging on its title bar. By inheriting from the Uize.Widget.Window base class, the draggable window widget gets child widgets for the "OK", "CANCEL", and "CLOSE" buttons.
There is a shield that is displayed when the window is opened up. This shield is faded out when you drag the window, with the idea being that if the user moves a window they quite likely are trying to move it out of the way in order to reveal something behind it, so nothing behind the window should remain obscured by a shield. Even when not visible, the shield is still present and blocks events to elements beneath the window in order to ensure its modal behavior.
The window widget provides a facility for a window to be moored to any node in a document, regardless of where the mooring node is in the DOM in relation to the window which needs to be absolutely positioned and above everything else in the document. The window in this example is moored to the DIV conspicuously named "MOORING NODE". Try resizing the document and notice how the window keeps its positional relationship to this DIV - even once you've moved the window.
To open the window, click the "OPEN WINDOW" button below.
| MOORING NODE |