Estoy usando JQuery draggable(); para hacer li elementos arrastrables. El único problema es cuando el elemento es arrastrado fuera de su padre, no. Es decir, no salir de los confines de su padre div. Un ejemplo está aquí: http://imgur.com/N2N1L.png – es como si el z-index para todo lo demás tiene mayor prioridad (y el elemento se desliza debajo de todo).

Aquí está el código:

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

Y la li elementos se colocan en DIVs como este:

<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 sale de su contenedor primario, pero no estoy seguro de qué hacer para salir.

Cualquier dirección o ayuda se agradece ENORMEMENTE!

OriginalEl autor Andy | 2010-04-16

5 Comentarios

  1. 21

    Aterricé en esta página con el mismo problema, y Brendan respuesta me hizo cerrar. Ajuste de la appendTo opción no ayuda, pero yo era capaz de resolver mi problema mediante la adición de overflow: visible a los padres de mi elemento draggable. Resulta que yo estaba descuidada heredar oculto en algún lugar de la cadena.

    Nota de lado, parece que esto funciona porque jQuery interfaz de usuario mueve el elemento draggable de forma dinámica la configuración de posicionamiento con relación a la matriz – esto era nuevo intel para mí!

    gracias mucho que trabajó para mí:)
    Vine aquí buscando una solución… curiosamente appendTo trabajado para mí!
    Puede usted por favor enviar el código de ejemplo está el enlace de jsfiddle etc.?
    He trabajado. Yo estaba luchando por el último par de días. Gracias Mike.
    Hola Amit, Mira mi jsfiddle jsfiddle.net/rahulvaradkar/w8dsz5qk Busque en la línea número #1 como <div id=»Table_Tree» title=»BCP Explorer» style=»display:none;overflow: visible»> Cambiar «overflow: scroll» O «overflow: hidden» y tratar de Arrastrar el «Paseo de la Granja». Obtendrá la diferencia.

    OriginalEl autor Mike Niebling

  2. 12

    También tuve el mismo problema.

    Puede utilizar esta opción

    de contención: $(‘#divmain’)

    ayudante: ‘clon’

    respectivamente, para

    – definir el límite de la zona del abandono de la acción

    – para muestra visible del objeto arrastrado también fuera del div padre, pero dentro de #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 ayude a alguien.

    Hombre, usted me salvó el día! Gracias.
    El helper: ‘clon’ opción es muy útil, ya que tengo un ul que debe conservar overflow: scroll;. Gracias!
    mejor que el café

    OriginalEl autor rfellons

  3. 10

    Se ve como una combinación de algunos de los anteriores, lo hizo por mí.

    Conjunto appendTo: 'body' y helper: 'clone'.
    De esta manera una nueva DOM-Objeto será creado como hijo del cuerpo, que será visible en todas partes. De esta manera usted puede arrastrar (y caída) en todas partes te gusta.

    Muchas gracias koshi 😛

    OriginalEl autor Koschi

  4. 3

    Esto se ve como un problema de css. Pruebe a desactivar la reversión por lo que queda cuando se arrastra hasta donde se es la mitad visible. Luego jugar con el z-index, etc en Firebug y ver si usted puede conseguir lo que muestra. Podría ser un problema de css con uno de los padres ul o del div con ‘overflow: hidden’.

    OriginalEl autor Brendan Heywood

  5. 2

    Tuve un problema similar y lo resolvió por la opción:

    appendTo: 'body'

    El único efecto secundario de esto es que si usted tiene estilos aplicados al elemento basado en su contenedor primario, los estilos no se presente en el ayudante.

    OriginalEl autor Jason Miesionczek

Dejar respuesta

Please enter your comment!
Please enter your name here