Search code examples
jquerydrag-and-dropresizable

Why can't I drag out of resizable container?

I have two divs, one of which is resizable. I need to be able to drag elements back and forth; out of one and into the other, both ways.

$(".item").draggable({
helper: 'clone'
});

$( ".container" ).droppable({   
drop: function( event, ui ) {
    if($(ui.draggable).parent() !==$(this)){
        $(ui.draggable).appendTo($( this ));
    }
}});

The drag and drop works perfectly when going from the non-resizable element to the resizable. When trying to drag out of the re-sizable element however, the dragged element disappears within the resizable container. The drag and drop works, but you dont see the dragged item once the mouse moves out of the resizable container.

Any suggestions on lifting the dragged out, so I see it attached to the mouse for entire drag?

Solution

  • It's hard to say if this will solve your problem without seeing your code in action, but try specifying the appendTo option so the helper's parent will be the <body> element instead of the original element's parent:

    $(".item").draggable({
    appendTo: "body",
    helper: "clone"
});