Drag item outside parent and into UI dialog

Question

I have an "li class='draggable' " and a "div class='dropable' " that is inside a ui dialog div

when i try to drag the 'li' i can't drag it outside it's parent element so i did this :

$(".draggable").draggable({
                containment: $('document'),
                helper: 'clone'
            });

i managed to dragged outside it parent element but here where the problem start when the ui dialog is opened and when i try to drag it the li is always behind the ui dialog and i can't drop it into the droppable div

Answer 1

Try appending the helper directly to the body, and possbly setting a zIndex, like so:

$(".draggable").draggable({
    appendTo: 'body', // Append to the body.
    zIndex: <someNumberYouThinkIsAppropriateHere>,
    containment: $('document'),
    helper: 'clone'
});

http://api.jqueryui.com/draggable/#option-appendTo

http://api.jqueryui.com/draggable/#option-zIndex