Basic usage

Start dragging.

Description
View Code
Configuration
Events

Enable draggable functionality on any DOM element.

Draggable initialization

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

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

DropTarget initialization

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

No code

draggable

distance: Integer(default: 5)

The required distance that the mouse should travel in order to initiate a drag.

filter: Selector

Selects child elements that are draggable if component is attached to a container.

group: String(default: "default")

Used to group sets of draggable and drop targets. A draggable with the same group value as a drop target will be accepted by the drop target.

hint: Function|jQuery

Provides a way for customization of the drag indicator.

Example

//hint as a function
 $("#draggable").kendoDraggable({
     hint: function() {
         return $("#draggable").clone();
     }
 });
//hint as jQuery object
 $("#draggable").kendoDraggable({
     hint: return $("#draggableHint");
 });

droptarget

group: String(default: "default")

Used to group sets of draggable and drop targets. A draggable with the same group value as a drop target will be accepted by the drop target.

draggable

drag

Fires while dragging.

dragend

Fires when item drag ends.

dragstart

Fires when item drag starts.

droptarget

dragenter

Fires when draggable moves over the drop target.

Event data

draggable : jQueryObject: Reference to the draggable that enters the drop target.

dragleave

Fires when draggable moves out of the drop target.

Event data

draggable : jQueryObject: Reference to the draggable that leaves the drop target.

drop

Fires when draggable is dropped over the drop target.

Event data

draggable : jQueryObject: Reference to the draggable that is dropped over the drop target.

Kendo

Skin

Draggable initialization

DropTarget initialization

Example

Event data

Event data

Event data