Drag Jquery draggable out of it's parent jquery dialog

Question

I have a jquery dialog that is filled with draggable objects. The droppable target is outside of the dialog.

When I initiate a drag, the droppable responds correctly (visual indications that it is a droppable target) and after a drop the correct events trigger so I can correctly handle the drop.

The problem is that the dragged object stays visible only within the dialog, and does not "jump out".

I already have draggables that drag from one scrollable div to another without problem, but from a dialog to the page containing the dialog it does not work. The dialog contents scroll in whatever direction the drag is going.

My draggable arguments are as follows:

var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     containment: 'DOM',
     zIndex: 999,
     addClasses: false
    }

   theObject.draggable(draggableArguments);

Any suggestions so that my draggable objects can cross the dialog boundaries?

Thanks.

Answer 1

Fixed, it was quite simple actually.

I just needed to use the appendTo option on the draggable so that the helper is appended to element where I want it to drag around (e.g. #page, a div that encompasses my page). This removes it from the dialog (which has an "overflow: auto" property, which adds scrollbars to extend the canvas so that the drag element is always within) and appends it to the #page element.

The only problem was my dialog had a pretty high zIndex, so I just incremented the zIndex option to be higher.

var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#page',
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
}

theObject.draggable(draggableArguments);

Answer 2

You have to do this:

$('.my_draggable').draggable({
  helper:'clone',
  appendTo: 'body',
  scroll: false
});