Restricting the Window to the Viewport

Environment

Description

The Kendo UI for Angular Window component can be dragged anywhere on the screen by the end user. How to restrict the end user from dragging it beyond a container viewport?

Solution

To ensure that the Window component cannot leave a specified wrapper or viewport, update its top, left, and height properties in accordance with the current size and position of the component while dragging.

1. Handle the leftChange and topChange events of the Window.

   Copy Code<kendo-window
           (leftChange)="restrictMovement()"
           (topChange)="restrictMovement()"
           ...
         >
   	...
   </kendo-window>

2. Use the getBoundingClientRect DOM element method to get information about the position of the Window wrapper element relative to the viewport.

   Copy Code  ngAfterViewInit(): void {
       this.wrapper = this.winWrapper.nativeElement.getBoundingClientRect();
     }

3. Implement conditions that check whether the Window leaves the boundaries of its wrapper and update the top and left properties accordingly. When the component is minimized, update the height property to consider the new dimensions of the Window while dragging.

The following example demonstrates the full implementation of the suggested approach.