Kendo UI MVVM with Kendo UI Drag and Drop

Question

I am attempting to use the Kendo UI MVVM framework with the Kendo UI drag and drop mechanic; But I am having a very difficult time finding out how to get the data dropped out of the draggable object.

My code is something like this ...

var viewModel = kendo.observable {
    Cart : [],
    Items : [
    {
      Id : "item/10",
      Name: "CD ROM"
    },
    {
      Id : "item/11",
      Name: "DVD ROM"
    }
};

So then I have a rough template binding...

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div data-bind="text: Name"></div>
    </li>
</script>

Then this gets called up in a list...

<div id="shopping-items-available">
   <ul data-template="products-template" data-bind="source: Items">
   </ul>
</div>

Then there is a standard "drop target" (taken from the kendo docs)

<div id="droptarget">Start dragging.</div>

with the following CSS

#droptarget {
    border: 1px solid #959595;
    height: 198px;
    width: 300px;
    font-size: 36px;
    border-radius: 37px;
    text-align: center;
    line-height: 198px;
    color: #a1a1a1;
    text-shadow: 0 1px 1px #fff;
    margin: 0 0 30px 220px;
    cursor: default;
    background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #c1c1c1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#c1c1c1));
    background: -webkit-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: -o-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: -ms-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
}

Now in the javascript, I turn the shopping-items-available div into a draggable.

    $("body").kendoDraggable({
        hint: function (target) {
            return $(target).clone().addClass("draggable");
        },
        filter: ".draggable"
    });

and lastly, I initialize the drop target.

    $("#droptarget").kendoDropTarget({
        drop: droptargetOnDrop
    });

but in my code, I cannot seem to get the actual data about the item that was dropped.

    function droptargetOnDrop(e) {
        console.log(e);
        $("#droptarget").text("You did great!");
        $(".draggable").removeClass("hollow");
    }

Answer 1

The data of the item being dropped is received by droptargetOnDrop as e.draggable.currentTarget.

If you want to move the item to the target area, you should do something like:

$("#droptarget").append(e.draggable.currentTarget);

NOTE Doing this, you will be moving the item. If you want to append a copy, you should append a clone of the node:

 $("#droptarget").append($(e.draggable.currentTarget).clone());

EDIT: For getting the data item without using a kendoDataSource I propose to change the template to:

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable" data-id="${Id}">
        <div data-bind="text: Name"></div>
    </li>
</script>

This saves the Id (or any information that allows you to find the element latter) in the DOM being dragged. Then in the handler we retrieve the Id and search the item corresponding to that Id.

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var id = $(dom).data("id");
    var items = viewModel.Items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].Id == id) {
            alert("Found : " + JSON.stringify(items[i]));
            break;
        }
    }
}

EDIT If you decide to use kendoListView you should define your template as:

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div>${Name}</div>
    </li>
</script>

The HTML container for the list would be:

Then initialize the ListView as:

var list = $("#shopping-items-available > ul").kendoListView({
    template  : $("#products-template").html(),
    dataSource: viewModel.Items
}).data("kendoListView");

and finally the droptargetOnDrop function:

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var item = list.dataSource.getByUid(dom.data("uid"));
    alert("Found : " + JSON.stringify(item));
}