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

Question

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

Я попытался это с FireFox 3.5.5 и Chromium 4.

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

Благодаря

Answer 1

Для тех из вас, кто ищет полный пример, посмотрите на Shopping Cart example на демоверсии JQuery. Это пример с возможностью удаления, но он точно иллюстрирует то, что было задано (перетаскивание элемента вне аккордеона).

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

И дальше оттуда.

Answer 2

Вы пробовали с помощью containment value of '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> 

Answer 3

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

Answer 4

Попробуйте

$ (".Селекторный") .draggable ({appendTo: 'тело'});

Answer 5

Вы не можете перетаскивать элементы за пределами аккордеона 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>