jQuery-Ui：オブジェクトをアコーディオンの外にドラッグできない

Question

私はアコーディオンウィジェットの中にドラッグ可能なオブジェクトを持っています。それをドラッグすると、その親であるアコーディオン要素が拘束されます。私は '封じ込め'オプションを使用しようとしましたが、成功しませんでした。

私はそれを解決する方法はありますFireFoxの3.5.5およびクロム4.

でこれを試してみましたか？

おかげ

Answer 1

完全な例をお探しの方は、jQuery UIデモのShopping Cart exampleをご覧ください。これは流行の例ですが、何が尋ねられていたかを正確に示しています（アコーディオンの外にある要素をドラッグする）。

$(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は似ているはずです。私は、デフォルトの 'orginal'の代わりに 'clone'を使用し、appendTo： 'body'を使って動作させることができました。それはあなたがappendTo： 'body'を設定すればよいと思うにもかかわらず、ヘルパーとしてオリジナルを使用するとヘルパーをボディに追加するように見えないので、変です。私はあなたがそれを働かせることを願っています！

Answer 4

$（ ".selector"）.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>