JQuery che trascina genitore esterno

Question

Sto usando draggable() di JQuery; per rendere trascinabili gli elementi li. L'unico problema è quando l'elemento viene trascinato all'esterno del suo genitore, non viene visualizzato. Cioè, non lascia i confini della sua div genitore. Un esempio è qui: http://imgur.com/N2N1L.png - è come se lo z-index per tutto il resto abbia una priorità maggiore (e l'elemento scorre sotto tutto).

Ecco il codice:

$('.photoList li').draggable({ 
     distance: 20, 
     snap: theVoteBar, 
     revert: true, 
     containment: 'document' 
    }); 

E gli elementi li sono messi in DIV come questo:

<div class="coda-slider preload" id="coda-slider-1"> 
    <div class="panel"> 
     <div class="panel-wrapper"> 
      <h2 class="title" style="display:none;">Page 1</h2> 
      <ul class="photoList"> 
       <li> 
        <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" /> 
       </li> 
      </ul> 
     </div> 
    </div> 

sono sicuro che il problema è che non lascerà la sua contenitore genitore, ma non sono sicuro di cosa fare per farlo uscire.

Qualsiasi direzione o aiuto sarebbe apprezzato GRAZIE!

Answer 1

Questo sembra un problema di css. Prova a disattivare il ripristino in modo che rimanga premuto quando lo trascini nel punto in cui è parzialmente visibile. Quindi gioca con lo z-index ecc in Firebug e vedi se riesci a vederlo. Potrebbe trattarsi di un problema css con uno dei genitore o di un altro con 'overflow: hidden'.

Answer 2

ho avuto un problema simile e risolto impostando l'opzione:

appendTo: 'body' 

L'unico effetto collaterale di questo è se avete stili applicati alla voce basati su di esso del contenitore principale, questi stili non lo farà essere presente sull'assistente

Answer 3

Sono atterrato su questa pagina con lo stesso identico problema e la risposta di Brendan mi ha avvicinato. L'impostazione dell'opzione appendTo non ha aiutato, ma sono riuscito a risolvere il problema aggiungendo overflow: visible al genitore del mio elemento trascinabile. Si scopre che ereditavo in modo schivo nascosto da qualche parte lungo la catena.

Nota a margine, sembra che funzioni perché l'interfaccia utente di jQuery sposta l'elemento trascinabile impostando in modo dinamico il posizionamento relativo al genitore - questa è stata una novità per me!

Answer 4

Ho avuto anche lo stesso problema.
È possibile utilizzare questa opzione

di contenimento: $ ('# divmain')
aiutante: 'clone', rispettivamente

per
- definire zona limite per far cadere l'azione
- per spettacoli visibili trascinato oggetto anche genitore div fuori ma dentro #divmain

esempio

<div id="divmain"> 
    <div id="divparentdraggable"> 
    <div id="divdraggable"></div> 
    </div> 
    <div id="divparentdroppable"> 
    <div id="divdroppable"></div> 
    </div> 
</div> 

codice jQuery:

$('divparentdraggable').draggable({ 
... 
containment: $('#divmain'), 
helper: 'clone', 
... 
}); 

spero che questo aiuto a qualcuno.

Answer 5

Sembra che una combinazione di alcuni dei precedenti ha fatto per me.

Set appendTo: 'body' e helper: 'clone'. In questo modo verrà creato un nuovo oggetto DOM come figlio del corpo che sarà visibile ovunque. In questo modo puoi trascinarlo (e rilasciarlo) ovunque desideri.