Estoy teniendo un efecto no deseado cuando se arrastra un div de un div contenedor que se establece como overflow: scroll.

He encontrado un ejemplo de alguien donde han tenido el tema, pero he sido incapaz de encontrar una solución

Ejemplo en el de Pegar bin

Lo que pasa es que el desplazamiento es simplemente mayor, puedo ver por qué esto sería el comportamiento deseado si quería arrastrar a un destino dentro de la desplazable div, pero quiero ser capaz de llevar fuera de su desplazamiento comprender.

InformationsquelleAutor Phill Duffy | 2009-05-01

6 Comentarios

  1. 95

    He tenido un problema similar habilitación de un arrastre entre dos overflow: auto divs. Con la ayuda de las respuestas anteriores, me encontré con que esta combinación funciona para mí (Safari 5.0.3, jquery 1.4.4, jquery-ui-1.8.7):

    appendTo: 'body',
    containment: 'window',
    scroll: false,
    helper: 'clone'
    • para mí, incluso sólo helper: ‘clon’ solo resuelto el problema
    • año el ayudante trabajó también para mí (por su propia cuenta)
    • Que bien, estoy arrastrando.
    • si tengo que incluir sólo helper:clon, funciona, uno de los otros se jugara! gracias por el comentario.
    • muchas gracias, has salvado mi día
    • 2015 y esta respuesta todavía rocas!
    • oh ps, estoy usando esto con angulares y todavía funciona como sigue: datos jqyoui-options=»{ appendTo: ‘el cuerpo’, de contención: ‘la ventana’, de desplazamiento: false, ayudante: ‘clon’ }»
    • Que es lo que estoy buscando gracias funciona muy bien.

  2. 55

    appendTo

    Elemento, SelectorDefault:’padre de familia’

    El elemento pasa a o seleccionado por el appendTo opción se utiliza como la posibilidad de arrastrar ayudante del contenedor durante el arrastre. De forma predeterminada, el ayudante se anexa el mismo contenedor que el arrastrables.

    Ejemplos de código
    Inicializar una arrastrarse con el appendTo opción especificada.

    $('.selector').draggable({ appendTo: 'body' });
    • Traté de hacer como usted sugiere, pero no se trata de cambiar a la conducta deseada, al agregar el código que se menciona en el ejemplo de la Pasta papelera de página, hace el trabajo para usted? Gracias
    • sí, estoy totalmente de fallar sobre esta cuestión. Jugué con él por una hora. Lo mejor que puedo conseguir es cómo la dejé, la posibilidad de arrastrar no funciona con overflow 🙁
    • No se preocupe, le agradezco su esfuerzo! 🙂
    • +1 Esta realidad trabajaba para mí.
    • Sí, usted acaba de guardar las horas y mi humillación de pedir el local de hot shot!
    • es probable que el local pez gordo sólo obtiene su información de aquí de todos modos.
    • Local pez gordo aquí, puedo confirmar que tengo toda mi información de StackOverflow.
    • Esto funcionó para mí! +1

  3. 33

    Es sin duda vale la pena prestar atención a la documentación

    http://docs.jquery.com/UI/Draggable#option-scroll

    de desplazamiento

    Tipo: Booleano

    Predeterminado: true

    Si se establece a true, contenedor auto-desplaza mientras se arrastra.

    Todos los que entran aquí, aprender de mi error, RT(F)M!!!

    • perdido 2 horas de hecho. Realmente debemos RTFM
    • He tenido un problema similar con un acordeón. Yo tenía una arrastrarse dentro de un panel acordeón y quería arrastrarlo fuera del acordeón, pero el panel acordeón había ‘desbordamiento’ a ‘auto’ y nunca me las arreglé para salir de la acordeón. Ajuste de desplazamiento: false» en el acordeón no ayuda. Al final me anuló el desbordamiento en jquery-ui. Esto hace que la altura de mi panel de contenido parecer extraño, así que tuve que había alambre de una altura dada. Y eso funcionó.
  4. 19

    El clon solución funciona, pero tiene dos problemas.

    Primero: el clon se anexe al cuerpo. Dependiendo de tu css, el elemento puede cambiar los estilos, desde antes de que empiece, que está dentro de otro elemento y durante el arrastre, será directamente en el cuerpo del elemento.

    Segundo: a Veces, el elemento DEBE mover, y el clon dejar que el objeto existe.

    Así, la solución para este problema es:

    $('.selector').draggable({
        helper: 'clone',
        start: function(){
            $(this).hide();             
        },
        stop: function(){
            $(this).show()
        }
    });
    • Perfecto! Y gracias por la sugerencia acerca de la css – me ha ayudado a resolver ambos problemas.
    • Realmente imitar la posibilidad de arrastrar la ‘original’ comportamiento, prefiere utilizar la propiedad CSS «visibilidad»
    • Simplemente IMPRESIONANTE!
    • gracias, funciona
  5. -1

    También puede especificar qué tipos de elementos que no desea incluir.

    <div class="draggable"> 
        <h2>This will drag the div</h2>
        <ul>
           <li>This won't drag the div</li>
        </ul>
    </div>

    Aplicar esta propiedad cancel para ignorar el evento especificado en los elementos secundarios

    $('.draggable').draggable({cancel : 'ul'});

Dejar respuesta

Please enter your comment!
Please enter your name here