jQuery-Ui: невозможно перетащить объект за пределы аккордеона - PullRequest
Новая
       7

jQuery-Ui: невозможно перетащить объект за пределы аккордеона

8 голосов
/ 01 декабря 2009

У меня есть перетаскиваемый объект внутри виджета аккордеона. При перетаскивании он ограничивает своего родителя, элемент accordion. Я пытался использовать опцию «сдерживание», но безуспешно.

Я пробовал это с FireFox 3.5.5 и Chromium 4.

Есть ли способ ее решить?

Спасибо

Ответы [ 5 ]

9 голосов
/ 25 февраля 2012

Для тех, кто ищет полный пример, взгляните на пример Корзина в демонстрационном интерфейсе jQuery UI. Это простой пример, но он точно показывает, о чем спрашивают (перетаскивание элемента за пределы аккордеона). 

$(function() {
        $( "#catalog" ).accordion();
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
});

И продолжайте оттуда.

5 голосов
/ 19 февраля 2010

Мой ответ относится к сортируемым, я думаю, что перетаскиваемые объекты должны быть похожими. Я смог заставить его работать, используя «клон» вместо «оригинального» по умолчанию и используя appendTo: «тело». Это странно, потому что если вы используете оригинал в качестве помощника, он, кажется, не добавляет помощник к телу, даже если вы думаете, что это следует сделать, если вы установите appendTo: 'body'. Я надеюсь, вы можете заставить его работать!

3 голосов
/ 01 сентября 2010

Попробуйте

$ (".selector") .draggable ({appendTo: 'body'});

1 голос
/ 01 декабря 2009

Вы пытались использовать значение содержания 'document' : 

$("#draggable1").draggable({ containment: 'document' });

Вот пример, который мне удалось вытащить за пределы аккордеона: 

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div id="draggable1">
    <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>

<script type="text/javascript">
$(function() {
    $("#accordion").accordion();
    $("#draggable1").draggable({ containment: 'document' });
});
</script>
0 голосов
/ 01 августа 2012

Вы не можете перетаскивать элементы за пределы аккордеона jQuery, потому что режим переполнения скрыт для контейнеров аккордеонов.

1) Вы можете попробовать установить переполнение на видимое (путем переопределения встроенного стиля), но в этом случае сам аккордеон может перестать работать. 

<div id="simpleAccordion" style="overflow: visible;">

 <h3>Header 1<h3>
 <div>...</div>

 <h3>Header 2<h3>
 <div>...</div>

 <h3>Header 3<h3>
 <div>...</div>

</div>
...