dragEnd

Fired after finishing dragging shapes or connection.

Event Data

e.connectionHandle String

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

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

  function onDragEnd(e){
    if(e.connections.length > 0){
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Finished 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("Finished dragging " + e.shapes.length + " shapes");
    }
  }
</script>
In this article