dragStart

Fired before starting dragging shapes or connection.

Event Data

e.connectionHandle String

A value indicating which handle of the connection will be dragged. The value will be "source for the source handle, "target" for the target handle and undefined if the entire connection will be 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.

e.preventDefault Function

A function that can be used prevent the default action. If invoked, the element(s) will not be dragged.

Example - handling the dragStart 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"
      }
    ],
    dragStart: onDragStart
  });

  function onDragStart(e){
    if(e.connections.length > 0){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Started dragging " + e.connections.length + " connections");
    }
    if(e.shapes.length > 0){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Started dragging " + e.shapes.length + " shapes");
    }
  }
</script>