JQuery Перетаскивание вне родителя

Я использую JQuery draggable(); чтобы сделать элементы li перетаскиваемыми. Единственная проблема - когда элемент перетаскивается за пределы его родителя, он не отображается. То есть, он не оставляет границ своего родительского div. Пример здесь: http://imgur.com/N2N1L.png - как будто индекс z для всего остального имеет больший приоритет ( и элемент скользит под всем).

Здесь код:

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

И элементы li помещаются в DIVs следующим образом:

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

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

Любое направление или помощь будут оценены БОЛЬШОЕ!

ОТВЕТЫ

Ответ 1

Я приземлился на этой странице с той же проблемой, и ответ Брендана заставил меня закрыть. Установка параметра appendTo не помогла, но я смог решить проблему, добавив overflow: visible к родительскому элементу моего перетаскиваемого элемента. Оказывается, я небрежно наследовал скрытую от где-то цепочку.

Обратите внимание: похоже, что это работает, потому что пользовательский интерфейс jQuery перемещает элемент draggable, динамически устанавливая позиционирование относительно родителя - это был новый интеллект для меня!

Ответ 2

У меня тоже была та же проблема.
Вы можете использовать эту опцию

сдерживание: $('# divmain')
helper: 'clone'

соответственно для
- определить область ограничения для действия сброса
- для отображения видимого объекта перетаскивания также вне родителя div, но внутри #divmain

Пример

<div id="divmain">
  <div id="divparentdraggable">
    <div id="divdraggable"></div>
  </div>
  <div id="divparentdroppable">
    <div id="divdroppable"></div>
  </div>
</div>

Код jquery:

$('divparentdraggable').draggable({ 
...
containment: $('#divmain'),
helper: 'clone',
...
});

Я надеюсь, что это поможет кому-то.

Ответ 3

Похоже, комбинация некоторых из вышеперечисленных сделала это для меня.

Установите appendTo: 'body' и helper: 'clone'. Таким образом, новый DOM-объект будет создан как дочерний элемент тела, который будет виден повсюду. Таким образом вы можете перетащить (и удалить) его везде, где хотите.

Ответ 4

Это похоже на проблему css. Попробуйте отключить возврат, чтобы он оставался на месте, когда вы перетаскиваете его туда, где он наполовину виден. Затем играйте с z-index и т.д. В Firebug и посмотрите, сможете ли вы его показать. Это может быть проблема css с одной из родительских ul или div с "overflow: hidden".

Ответ 5

У меня была аналогичная проблема и разрешил ее, установив параметр:

appendTo: 'body'

Единственный побочный эффект этого - если у вас есть стили, применяемые к элементу на основе его родительского контейнера, эти стили не будут присутствовать в помощнике.