Positioning and Dragging
The Kendo UI for Vue 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 move event to receive the updated coordinates while the user drags the Window, and store them in reactive state so that the Window follows the pointer. For more information, see Controlled Mode and Events.
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. For more information, see Minimizing and Maximizing. - When the Window itself has focus, the arrow keys move it by a fixed step.
- The
moveevent fires during dragging and itsendfield istruewhen the user drops the Window. - The Window cannot be dragged above the top edge of the viewport.
The following example lets you toggle the draggable prop of the Window.