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

[Coty]

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.

UPDATE:

- 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....
...
$("#myEmptyDropZone").html(html);

//Drop in my draggable item i was dragging
e.dropTarget.html(e.draggable.element);

// refresh all draggables because now both draggable items don't work
    CreateDraggableWidgets();



// my create draggable items function
    function CreateDraggableWidgets() {
        //create draggable items within the container
        $(".draggable-item").kendoDraggable({
            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 }
        });
    }

 

 

 

 

[Daniel]

Hi,

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();

$("#myEmptyDropZone").html(html);

Regards,
Daniel
Telerik