JQuery Dragging Outside Parent

Question

Estoy usando el draggable() de JQuery; hacer que los elementos li se puedan arrastrar El único problema es cuando el elemento se arrastra fuera de su elemento primario, no aparece. Es decir, no deja los confines de su div principal. Un ejemplo está aquí: http://imgur.com/N2N1L.png - es como si el índice z para todo lo demás tuviera una mayor prioridad (y el elemento se desliza bajo todo).

Aquí está el código:

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

Y los elementos li se colocan en DIVs así:

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

Estoy seguro de que el problema es que no dejará su contenedor principal, pero no estoy seguro de qué hacer para sacarlo.

¡Cualquier dirección o ayuda sería apreciada GRANDEAMENTE!

Answer 1

Parece un problema de css. Intente desactivar la reversión para que permanezca activada cuando la arrastre a la mitad de su visibilidad. Luego juegue con el índice Z, etc. en Firebug y vea si puede mostrarlo. Podría ser un problema de CSS con uno de los padres ul o div con 'overflow: hidden'.

Answer 2

tuve un problema similar y lo resolvió estableciendo la opción:

appendTo: 'body' 

El único efecto secundario de esto es si usted tiene estilos aplicados al elemento basado en que es contenedor primario, esos estilos no lo hará estar presente en el ayudante.

Answer 3

Aterricé en esta página con exactamente el mismo problema, y ​​la respuesta de Brendan me acercó. Establecer la opción appendTo no ayudó, pero pude resolver mi problema agregando overflow: visible al elemento principal de mi elemento arrastrable. Resulta que estaba heredando descuidadamente escondido de alguna parte de la cadena.

Nota al margen, parece que esto funciona porque jQuery UI mueve el elemento arrastrable al establecer dinámicamente el posicionamiento en relación con el elemento principal: ¡esta era una nueva información para mí!

Answer 4

Tuve también el mismo problema.
Puede usar esta opción

de contención: $ ('# divmain')
ayudante: 'clon'

, respectivamente, para
- definir el área límite para dejar caer la acción
- para espectáculos visibles también objeto arrastrado fuera div padre pero dentro #divmain

ejemplo

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

código jQuery:

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

espero que esto ayuda a alguien.

Answer 5

Parece que una combinación de algunos de los anteriores lo hizo por mí.

Conjunto appendTo: 'body' y helper: 'clone'. De esta forma se creará un nuevo DOM-Object como elemento secundario del cuerpo que será visible en todas partes. De esta forma, puede arrastrarlo (y soltarlo) donde quiera.