Draggable

Enable draggable functionality on any DOM element.

Draggable initialization

var draggable = $("#draggable").kendoDraggable();

DropTarget

Enable any DOM element to be a target for draggable elements.

DropTarget initialization

var dropTarget = $("#dropTarget").kendoDropTarget();

Drag

The kendo Drag component provides a cross-browser, touch-friendly way to handle mouse and touch drag events.

Drag initialization

var drag = new kendo.Drag($("#draggable"));

DragAxis

The DragAxis is used internally by the kendo.Drag component to store and calculate event data. The Drag component contains two DragAxis instances: x for the horizontal coordinates, and y for the vertical. The two DragAxis instances are available in each Drag event parameter.

Access DragAxis information in Drag start event

new kendo.Drag($("#foo"), {
 start: function(e) {
     console.log(x); // Horizontal axis
     console.log(y); // Vertical axis
 }
});

Each axis instance contains the following fields:

location - the offset of the mouse/touch relative to the entire document (pageX/Y);
startLocation - the offset of the mouse/touch relative to the document when the drag started;
client - the offset of the mouse/touch relative to the viewport (clientX/Y);
delta - the change from the previous event location
velocity - the pixels per millisecond speed of the current move.