title: Kendo UI MVVM with Kendo UI Drag and Drop
body: <p>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 <code>draggable</code> object.</p>
  
  <p>My code is something like this ... </p>
  
  <pre><code>var viewModel = kendo.observable {
      Cart : [],
      Items : [
      {
        Id : "item/10",
        Name: "CD ROM"
      },
      {
        Id : "item/11",
        Name: "DVD ROM"
      }
  };
  </code></pre>
  
  <p>So then I have a rough template binding...</p>
  
  <pre><code>&lt;script id="products-template" type="text/x-kendo-template"&gt;
      &lt;li class="draggable"&gt;
          &lt;div data-bind="text: Name"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Then this gets called up in a list...</p>
  
  <pre><code>&lt;div id="shopping-items-available"&gt;
     &lt;ul data-template="products-template" data-bind="source: Items"&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then there is a standard "drop target" (taken from the kendo docs)</p>
  
  <pre><code>&lt;div id="droptarget"&gt;Start dragging.&lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS</p>
  
  <pre><code>#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%);
  }
  </code></pre>
  
  <p>Now in the javascript, I turn the <code>shopping-items-available</code> div into a <code>draggable</code>.</p>
  
  <pre><code>    $("body").kendoDraggable({
          hint: function (target) {
              return $(target).clone().addClass("draggable");
          },
          filter: ".draggable"
      });
  </code></pre>
  
  <p>and lastly, I initialize the drop target.</p>
  
  <pre><code>    $("#droptarget").kendoDropTarget({
          drop: droptargetOnDrop
      });
  </code></pre>
  
  <p>but in my code, I cannot seem to get the actual data about the item that was dropped.</p>
  
  <pre><code>    function droptargetOnDrop(e) {
          console.log(e);
          $("#droptarget").text("You did great!");
          $(".draggable").removeClass("hollow");
      }
  </code></pre>