Here is some code for the working with drag n drop with kendo drag n drop. This is considered that you are already have your application with kendo enabled environment.
(A) HTML - Following code is your html initialization for the drag & drop object
- Drag Object
- Drop Object(A) HTML - Following code is your html initialization for the drag & drop object
- Drag Object
Drag Me
Drop Here
(B) Script - Following code is your jquery function for initialization and drag n drop handling
- Drag object Initialization and event handling
$(this).find("#dragObj").kendoDraggable({
filter: "this:not(.disabled)",
hint: function () {
return "
Drop Me
";},
dragstart: startfuncion,
dragend: endfunction,
dragcancel: cancelfunction
});
- filter : this line of statement is responsible to disable any object during drag n drop so if you have filtered anything it will be get disable on time of drag and once you drop/cancel current operation it will be again enabled.
function startfuncion(e)
{
//you can find your current object related information which is being dragged using e.currentTarget
}
function endfunction(e)
{
//you can write your logic after event get end
}
function cancelfunction(e)
{
//you can find your logic for drag cancel
}
- Drop object initialization and event handling
$("#dropHere").kendoDropTarget({
dragenter: dropenterfunction,
dragleave: dropleavefunction,
drop: dropfunction,
dragcancel: dropcancelfunction
});
function dropenterfunction(e)
{
//you can find your logic for highlighting when draggable object enters in this region
}
function dropleavefunction(e)
{
//you can find your logic for remove highlighting when draggable object leaves this region
}
function dropfunction(e)
{
//you can find your logic for object which is dropped to this region
}
function dropcancelfunction(e)
{
//you can find your logic for object which is dragged but was cancelled
}
Below is link for the kendo drag n drop demo and documentation for same
(1) Demo for Drag & Drop Component in Kendo UI jQuery framework
(2) Overview of DOM element Draggable functionality | Kendo UI Docs
