New to Kendo UI for jQuery? Start a free 30-day trial

Draggable

configuration

Enables (true) or disables (false) the dragging of the widget.

draggable

Object|Boolean

Default: true

<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
  draggable: false
});
</script>

<div id="container">
  <div id="dialog">
    <div style="width: 20px; height: 20px; border: 1px solid red;" id="handle"></div>
  </div>
</div>
<script>
$("#dialog").kendoWindow({
  draggable: {
    containment: "#container",
    axis: "x",
    dragHandle: "#handle"
  }
});
</script>

draggable.axis

String

Constrains dragging to the horizontal (x) or to the vertical (y) axis.

The supported values are:

Default: ""

<div id="container">
  <div id="dialog">
  </div>
</div>
<script>
$("#dialog").kendoWindow({
  draggable: {
    axis: "x"
  }
});
</script>

Defines the element in which the window will be able to move. The containment option overrides the appendTo setting and attaches the Window to the specified DOM element. Accepts either a selector or an element.

The containment element has to be positioned, that is, its CSS position attribute has to be set to relative, absolute, or fixed.

Default: ""

<style>
    #container {
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px solid grey;
    }
</style>

<div id="container">
    <div id="window">
        <p>Alvar Aalto is one of the greatest names in modern architecture and design.
          Glassblowers at the iittala factory still meticulously handcraft the legendary vases
          that are variations on one theme, fluid organic shapes that let the end user decide the use.
        </p>
    </div>
</div>

<script>
    $(document).ready(function() {
      $("#window").kendoWindow({
        width: "300px",
        height: "200px",
        draggable: {
            containment: "#container"
        }
      });
    });
</script>

draggable.dragHandle

String

Restricts the dragging of the window through the specified element which will be part of the window content. Accepts either a selector or an element.

Default: ".k-window-titlebar"

<div id="dialog">
  <div style="width: 20px; height: 20px; border: 1px solid red;" id="handle"></div>
</div>
<script>
$("#dialog").kendoWindow({
  draggable: {
    dragHandle: "#handle"
  }
});
</script>

Draggable

draggable

draggable.axis

draggable.containment

draggable.dragHandle