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

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

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

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

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

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

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

   theObject.draggable(draggableArguments);

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

Спасибо.


drag-and-drop jquery jquery-ui-dialog
person Daniel Gollás    schedule 27.09.2010    source источник

Ответы (2)


arrow_upward
12
arrow_downward

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

Мне просто нужно было использовать опцию 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);
person Daniel Gollás    schedule 27.09.2010
comment
У +1 была такая же проблема, и я нашел решение здесь. Спасибо - person The Bndr; 04.07.2012

arrow_upward
3
arrow_downward

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

$('.my_draggable').draggable({
  helper:'clone',
  appendTo: 'body',
  scroll: false
});
person Ivelin    schedule 19.07.2011
comment
Я знаю, что это старый ответ, но для тех, кто читает это сейчас, это сработало для меня с опущенным helper: 'clone'. - person 100pic; 04.04.2016