jQuery-Ui: Objekt kann nicht außerhalb eines Akkordeons gezogen werden

Question

Ich habe ein ziehbares Objekt in einem Akkordeon-Widget. Wenn Sie es ziehen, wird sein Elternelement, das Akkordeonelement, eingeschränkt. Ich habe versucht, die Option "containment" ohne Erfolg zu verwenden.

Ich habe versucht, dies mit FireFox 3.5.5 und Chromium 4.

Gibt es eine Möglichkeit, es zu lösen?

Dank

Answer 1

Wenn Sie ein vollständiges Beispiel suchen, werfen Sie einen Blick auf die Shopping Cart example der jQuery UI-Demo. Dies ist ein Fallbeispiel, zeigt aber genau, was gefragt wurde (Ziehen eines Elements außerhalb eines Akkordeons).

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

Und weiter von dort.

Answer 2

Haben Sie die containment value of 'document' versucht mit:

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

Hier ein Beispiel ich in der Lage war außerhalb des Akkordeons ziehen

:

<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

Meine Antwort gilt für sortables, ich glaube, ziehbare Dinge sollten ähnlich sein. Ich konnte es schaffen, indem ich 'clone' anstelle des Standard 'orginal' benutze und appendTo: 'body' verwende. Es ist komisch, denn wenn Sie das Original als Helfer verwenden, scheint es den Helfer nicht an den Körper anzuhängen, obwohl Sie denken würden, wenn Sie appendTo: 'body' setzen würden. Ich hoffe, du kannst es zum Laufen bringen!

Answer 4

Versuchen

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

Answer 5

Sie können keine Objekte außerhalb eines jQuery-Akkordeons ziehen, da der Überlaufmodus für die Akkordeon-Container ausgeblendet ist.

1) Sie können versuchen, den Überlauf sichtbar zu machen (durch einen Inline Style Override), aber in diesem Fall funktioniert das Akkordeon möglicherweise nicht mehr.

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