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

Drag

events

Fired when dragging shapes or connection.

A value indicating which handle of the connection is being dragged. The value will be "source" for the source handle, "target" for the target handle and undefined if the entire connection is being dragged.

e.connections `Array`

An array with the dragged connection.

e.shapes `Array`

An array with the dragged shapes.

e.sender `kendo.dataviz.ui.Diagram`

The widget instance which fired the event.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 160,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2"
      }
    ],
    drag: onDrag
  });

  function onDrag(e){
    if(e.connections.length > 0){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Dragging connection(s)");
    }
    if(e.shapes.length > 0){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Dragging shape(s)");
    }
  }
</script>

Drag

drag

Event Data

e.connectionHandle `String`

e.connections `Array`

e.shapes `Array`

e.sender `kendo.dataviz.ui.Diagram`

Drag

drag

Event Data

e.connectionHandle String

e.connections Array

e.shapes Array

e.sender kendo.dataviz.ui.Diagram

e.connectionHandle `String`

e.connections `Array`

e.shapes `Array`

e.sender `kendo.dataviz.ui.Diagram`