Positioning and Dragging
The Kendo UI for Angular Window enables you to set its position and move it by dragging.
Positioning
To specify the initial position of the Window, use its top and left inputs. If you omit either input, the Window centers along that axis of the viewport.
To control the position from your application state, use two-way binding with the top and left properties. The topChange and leftChange events emit the updated offsets while the user drags the Window, so the bound values stay in sync with its position.
The following example sets the initial position of the Window and keeps its offsets bound to the application state.
Dragging
By default, the Window enables you to move it by dragging its title bar. To control this behavior, use the draggable input. 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 maximized. For more information, see Minimizing and Maximizing.
- When the Window itself has focus, the arrow keys move it by 10 pixels. Setting
draggabletofalsedisables this keyboard movement as well. - The
dragStartanddragEndevents fire when the user starts and finishes dragging the Window.
The following example lets you toggle the draggable input of the Window.