Перетаскивание JQuery вне родителя - PullRequest
Новая
       7

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

17 голосов
/ 17 апреля 2010

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

Вот код: 

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

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

<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>

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

Любое направление или помощь будет принята с благодарностью!

Ответы [ 5 ]

21 голосов
/ 01 июня 2011

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

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

12 голосов
/ 31 января 2013

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

сдерживание: $ ('# divmain')
помощник: «клон»

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

пример 

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

Код запроса: 

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

Надеюсь, это кому-нибудь поможет.

10 голосов
/ 26 сентября 2014

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

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

3 голосов
/ 17 апреля 2010

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

2 голосов
/ 15 февраля 2011

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

appendTo: 'body'

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

...