jQuery-Ui: impossibile trascinare oggetti all'esterno di una fisarmonica

Question

Ho un oggetto trascinabile all'interno di un widget di fisarmonica. Quando lo trascini, è vincolato il suo genitore, l'elemento fisarmonica. Ho provato a utilizzare l'opzione 'contenimento' senza successo.

Ho provato questo con FireFox 3.5.5 e Cromo 4.

C'è un modo per risolverlo?

Grazie

Answer 1

Per quelli di voi che cercano un esempio completo, date un'occhiata allo Shopping Cart example sulla demo dell'interfaccia utente di jQuery. Questo è un esempio trascinabile, ma illustra esattamente cosa veniva richiesto (trascinando un elemento all'esterno di una fisarmonica).

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

E continuare da lì.

Answer 2

Hai provato a usare il containment value of 'document':

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

Ecco un esempio sono stato in grado di trascinare fuori la fisarmonica:

<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

La mia risposta vale per sortables, penso i draggables dovrebbero essere simili. Sono stato in grado di farlo funzionare usando "clone" invece del predefinito "originale" e usando appendTo: "body". È strano perché se usi l'originale come helper non sembra aggiungere l'helper al corpo, anche se dovresti pensare che dovresti impostare appendTo: 'body'. Spero che tu possa farlo funzionare!

Answer 4

Prova

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

Answer 5

Non è possibile trascinare elementi all'esterno di una fisarmonica jQuery perché la modalità di overflow è impostata su nascosto per i contenitori di fisarmoniche.

1) È possibile provare a impostare l'overflow su visibile (tramite un override di stile in linea), ma in tal caso la stessa fisarmonica potrebbe smettere di funzionare.

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