Перетащите Jquery из его родительского диалогового окна jquery.

Question

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

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

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

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

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

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

   theObject.draggable(draggableArguments);

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

Спасибо.

Answer 1

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

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

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

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

theObject.draggable(draggableArguments);

Answer 2

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

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