MVVM with Drag and Drop

2 posts, 0 answers
  1. Amelia
    Amelia avatar
    5 posts
    Member since:
    Aug 2013

    Posted 07 Aug 2013 Link to this post

    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? 
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 12 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top