Manually Move a draggable item using Jquery without breaking the draggable object

2 posts, 0 answers
  1. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 08 Mar Link to this post

    Hey there, making a dashboard with draggable widgets.  There are specific drop zones on each page to keep it organized.  Only 1 widget is allowed into a drop zone at a time, so if someone drags a widget onto another one, the widget that is already in the drop zone needs moved to an open drop zone.  I have this functionality working with some custom code, but for whatever reason the draggable object loses its dragginess after I manually move it.  I'm guessing this is expected behavior because KendoUI doesn't know I move it.


    - Ok I solved my Issue, by resetting my draggable objects after each drop.  But I wanted to still post the question to make sure that this is how it is supposed to be done, and I'm not just missing a built in way to do this?

    for reference, in my onDrop method (simplified) I do this:

    // save drop target data to move manually
    var html = e.dropTarget.clone();
    //find an available empty drop zone to place it....
    //Drop in my draggable item i was dragging
    // refresh all draggables because now both draggable items don't work
    // my create draggable items function
        function CreateDraggableWidgets() {
            //create draggable items within the container
                filter: ".drag-handle",
                hint: function (element) {
                    var width = element.parent().width();
                    var hint = element.closest(".draggable-item").clone();
                    hint.css("width", width);
                    return hint;
                cursorOffset: { top: 7, left: 2 }





  2. Daniel
    Daniel avatar
    2109 posts

    Posted 11 Mar Link to this post


    The clone method will not preserve correctly the widget(even with copied data and events). You should move the actual element which unless I am mistaken about the setup(draggable and droptarget are different elements) should be the dropTarget child e.g.
    var html = e.dropTarget.children();

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top