Перетащите JQuery, перетащив из него родительский диалог jquery

У меня есть диалоговое окно jquery, которое заполняется перетаскиваемыми объектами. Отбрасываемая цель находится вне диалогового окна.

Когда я запускаю перетаскивание, droppable правильно реагирует (визуальные указания о том, что он является недоступной целью), и после того, как выпадет правильный запуск событий, я могу правильно обработать падение.

Проблема заключается в том, что объект перетаскивания остается видимым только в диалоговом окне и не "выпрыгивает".

У меня уже есть draggables, которые перетаскивают из одного прокручиваемого div в другой без проблем, но из диалогового окна на страницу, содержащую диалог, он не работает. Содержимое диалога прокручивается в любом направлении, в котором происходит перетаскивание.

Мое перетаскиваемые аргументы таковы:

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

   theObject.draggable(draggableArguments);

Любые предложения, чтобы мои перетаскиваемые объекты могли пересекать границы диалога?

Спасибо.

Ответ 1

Исправлено, на самом деле это было довольно просто.

Мне просто нужно было использовать опцию appendTo для draggable, чтобы хелпер был добавлен к элементу, где я хочу его перетащить (например, #page, div, который включает мою страницу). Это удаляет его из диалога (который имеет свойство "overflow: auto", которое добавляет полосы прокрутки для расширения холста, так что элемент перетаскивания всегда находится внутри) и добавляет его к элементу #page.

Единственная проблема заключалась в том, что у моего диалога был довольно высокий zIndex, поэтому я просто увеличил опцию zIndex выше.

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

theObject.draggable(draggableArguments);

Ответ 2

Вы должны сделать это:

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