Thursday, October 1, 2015

Working with kendo drag n drop

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

                   
Drag Me

               
- Drop Object

                   
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