How to restrict the movement of the Window inside the viewport

Updated over 6 months ago

Environment

Product Version	5.1.0
Product	Progress® Kendo UI for Vue Native

Description

The Kendo UI for Vue Native 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

You can achieve that by using the Window position to determine if it is inside the set boundaries of the desired area and to restrict its movement inside them. In the onMove event, you can get the left and top CSS positions of the Window component. You can use them to control the left and top positions of the Window, by setting them to state variables at a specific condition, and passing them to the left and top properties of the Window component.

Runnable example

To test the following example, drag around the Window:

Change Theme

Theme

Loading ...