MVVM with Drag and Drop

[Amelia]

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");
}

So the question is, how can I get the data that should be part of this? Like the name, or the Id? 

[Petyo]

Hello Ciel,

You can persist the ID of the item as a data attribute of the draggable element, and later retrieve it using the jQuery data method. Something like: 

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

Regards,
Petyo
Telerik