drop

Triggered when a node is being dropped.

Event Data

e.sourceNode Element

The node that is being dropped.

e.destinationNode Element

The node that the sourceNode is being dropped upon.

e.valid Boolean

Whether this drop operation is permitted.

e.setValid Function

Allows the drop to be prevented.

e.dropTarget Element

The element that the node is placed over.

e.dropPosition String

Shows where the source will be dropped. One of the values over, before, or after.

The difference between e.setValid(false) and e.preventDefault()

Both operations cancel the default drag operation, but the indication to the user is different. e.setValid(false) indicates that the operation was unsuccessful by animating the drag clue to its original position. e.preventDefault() simply removes the clue, as if it has been dropped. As a general rule, use preventDefault to manually handle the drag&drop operation, and setValid(false) to indicate unsuccessful drag&drops.

Example - subscribe to the "drop" event during initialization

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ],
  drop: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Dropped", e.sourceNode);
  }
});
</script>

Example - subscribe to the "drop" event after initialization

<div id="treeview"></div>
<script>
function tree_drop(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("Dropped", e.sourceNode);
}
$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drop", tree_drop);
</script>