Constrain Movement

The draggable-containment prop defines the selector of an element in which the window will be able to move. The element must have sufficient dimensions to contain the window. Accepts a selector. The Window element is appended to the containment element. Thus, the appendTo setting gets overridden.

The draggable-axis prop constrains the dragging to horizontal (x) or vertical (y) axis. Accepts two possible values: "x", "y".

The draggable-dragHandle prop restricts dragging of the window from the specified element. It should be part of the window element. Accepts a selector.

<div id="vueapp" class="vue-app">
  <div id="containment" style="width: 500px; height: 300px; position: absolute; border: 1px solid rgba(20,53,80,0.14)"></div>
    <kendo-window :width="'270px'"
                                :height="'120px'"
                                :title="'About Alvar Aalto'"
                                :visible="visible"
                                :actions="actions"
                                :draggable="draggable">
        <p>Alvar Aalto is one of the greatest names in modern architecture and design. </p>
    </kendo-window>
</div>
Vue.use(WindowInstaller);

new Vue({
    el: '#vueapp',
    data: {
        visible: true,
        draggable: {
            containment: "#containment"
        },
        actions: [
            'Pin',
            'Maximize',
            'Close'
        ]
    }
})

In this article