drag

Fired when dragging shapes or connection.

Event Data

e.connectionHandle String

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.

Example - handling the drag 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>