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

Editable.drag

configuration

Specifies if the shapes and connections can be dragged.

editable.drag

Boolean|Object

Default: true

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      drag: false
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>

Specifies the shapes drag snap options. By default, during dragging, the shapes move by a given number of pixels at once. You can disable this behavior to make shapes movement smooth or you can specify a different number for the drag snap size to simulate a snap-to-grid functionality.

Default: true

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "name": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    editable: {
      drag: {
        snap: false
      }
    },
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>

Editable.drag

editable.drag

editable.drag.snap

Related Members