kendo-vue/knowledge-base/window-restrict-movement-inside-viewport.md

title	description	type	page_title	slug	tags	res_type	category
How to restrict the movement of the Window inside the viewport	An example that showcases how to restrict the movement of the Window inside the viewport	how-to	Learn how to restrict the movement of the Window inside the viewport - Kendo UI for Vue Window	window-restrict-movement-inside-viewport	window, restrict, viewport, kendovue, native, movement	kb	knowledge-base

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]({% slug api_dialogs_windowprops %}#toc-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]({% slug api_dialogs_windowprops %}#toc-left) and [top]({% slug api_dialogs_windowprops %}#toc-top) properties of the Window component.

Runnable example

To test the following example, drag around the Window:

{% meta id:index height:480 %} {% embed_file window-restrict-movement-inside-viewport/main.vue preview %} {% embed_file window-restrict-movement-inside-viewport/main.js %} {% endmeta %}