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'
Единственный побочный эффект этого - если у вас есть стили, применяемые к элементу на основе его родительского контейнера, эти стили не будут присутствовать в помощнике.