Positioning and Dragging
The Window enables you to set its position and move it by dragging.
Positioning
To specify the initial position of the Window, use its initialTop and initialLeft properties. In this uncontrolled mode, the Window manages its position internally after the initial render. If initialTop and initialLeft are not provided, the Window is initially positioned at the center of the viewport.
To control the position from your application state, set the top and left properties. Handle the onMove event to receive the updated coordinates while the user drags the Window, and store them in the state so that the Window follows the pointer.
The following example sets the initial position of the Window.
Dragging
By default, the Window enables you to move it by dragging its title bar. To control this behavior, use the draggable property. Set it to false to prevent the user from dragging the Window.
The following behaviors apply to dragging:
- Dragging is not available while the Window is in the
FULLSCREENstage. - When the Window itself has focus, the arrow keys move it by a fixed step.
- The
onMoveevent fires during dragging and itsendfield istruewhen the user drops the Window.
The following example lets you toggle the draggable prop of the Window.