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 ...
So then I have a rough template binding...
Then this gets called up in a list...
Then there is a standard "drop target" (taken from the kendo docs)
with the following CSS
Now in the javascript, I turn the `shopping-items-available` div into a `draggable`.
and lastly, I initialize the drop target.
but in my code, I cannot seem to get the actual data about the item that was dropped.
So the question is, how can I get the data that should be part of this? Like the name, or the Id?
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?