New to Kendo UI for jQuery? Start a free 30-day trial

Drag

events

(Available as of the 2015.3.1014 release) Fires while the user is dragging and item. This event is triggered on every mouse move. The event handler function context (available through the this keyword) will be set to the widget instance.

drag

Event Data

e.sender `kendo.ui.TreeList`

The widget instance which fired the event.

e.source `kendo.data.TreeListModel`

The model of the source row.

e.target `jQuery`

The element under the cursor.

e.pageX `Number`

The x coordinate of the mouse.

e.pageY `Number`

The y coordinate of the mouse.

e.status `String`

The status that the drag clue shows (i-plus, i-cancel, i-insert-up, i-insert-middle or i-insert-down).

e.setStatus `Function`

Allows a custom drag clue status to be set.

Pre-defined status classes are:

k-i-insert-up - Indicates that the item will be inserted on top.
k-i-insert-middle - Indicates that the item will be inserted in the middle.
k-i-insert-down - Indicates that the item will be inserted at the bottom.
k-i-plus - Indicates that the item will be added/appended.
k-i-cancel - Indicates an invalid operation. DO NOT overwrite this class as the drag logic depends on it.

<div id="treelist"></div>
<script>
  var service = "https://demos.telerik.com/service/v2/core";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: true
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    drag: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("dragging", e.source, e.target);
    }
  });
</script>

<div id="treeList"></div>
<script>
  var service = "https://demos.telerik.com/service/v2/core";

  function drag(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("dragging");
  }

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: true
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ]
  });

  var treeList = $("#treeList").data("kendoTreeList");
  treeList.bind("drag", drag);
</script>

<div id="treelist"></div>
<script>
  var service = "https://demos.telerik.com/service/v2/core";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: {
      reorderable: true
      }
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    drag: function(e) {
      // Replace the "add" icon with a "copy" icon. DO NOT REPLACE THE i-cancel status!
      if(e.status === 'plus') {
        e.setStatus("copy");
      }
    }
  });
</script>