Edit this page

drag

Triggered while a node is being dragged.

Event Data

e.sourceNode Element

The node that is being dragged.

e.dropTarget Element

The element that the node is placed over.

e.pageX Number

The x coordinate of the mouse.

e.pageY Number

The y coordinate of the mouse.

e.statusClass String

The status that the drag clue shows (add, denied, insert-top, insert-middle or insert-bottom).

e.setStatusClass Function

Allows a custom drag clue status to be set.

Pre-defined status classes are:

  • k-insert-top
    • Indicates that the item will be inserted on top.
  • k-insert-middle
    • Indicates that the item will be inserted in the middle.
  • k-insert-bottom
    • Indicates that the item will be inserted at the bottom.
  • k-add
    • Indicates that the item will be added/appended.
  • k-denied
    • Indicates an invalid operation. Using this class will automatically make the drop operation invalid, so there will be no need to call setValid(false) in the drop event.

Please note that from version 2016.3.914 the naming convention for pre-defined status classes is k-i-className. Since version 2017.1.118 the following status classes are used: k-i-insert-up, k-i-insert-down, k-i-insert-middle, k-i-plus, k-i-cancel.

Note that status classes are returned without the k- prefix by e.statusClass, but this prefix is required when setting a predefined status class via e.setStatusClass. A prefix is not required if setting a custom status CSS class.

Example - subscribe to the "drag" event during initialization

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ],
  drag: function(e) {
    console.log("Drag", e.sourceNode, "over", e.dropTarget);
  }
});
</script>

Example - subscribe to the "drag" event after initialization

<div id="treeview"></div>
<script>
function tree_drag(e) {
  console.log("Drag", e.sourceNode, "over", e.dropTarget);
}
$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", tree_drag);
</script>

Example - disable node reordering

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dragAndDrop: true,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" },
      { text: "baz" }
    ] }
  ]
});

var treeview = $("#treeview").data("kendoTreeView");

treeview.bind("drag", function(e) {
  // if the current status is "insert-top/middle/bottom"
  if (e.statusClass.indexOf("insert") >= 0) {
    // deny the operation
    e.setStatusClass("k-i-cancel");
  }
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy