jquery ui - example - jQuery Arrastrable y problema de desbordamiento

jquery drag and drop list

Question

Estoy teniendo un efecto no deseado cuando arrastro un div desde un contenedor div que está configurado como overflow: scroll.

He encontrado un ejemplo de otra persona donde han tenido el problema pero no he podido encontrar una resolución

Ejemplo en la bandeja de la pasta

Lo que sucede es que el desplazamiento se ha incrementado, puedo ver por qué este sería el comportamiento deseado si quisiera arrastrar a un destino dentro del div desplazable, pero quiero poder sacarlo de su agarre de desplazamiento.

Answer 1

Configurar la opción de desplazamiento no impide que los niños se oculten en el área de desbordamiento. He creado una ronda de trabajo que usa la opción de ayuda. Echale un vistazo:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

También aquí hay una referencia a otra publicación que hice:

jquery ui elementos arrastrables no ''arrastrables'' fuera de desplazamiento de div

Answer 2

La solución de clonación funciona, pero tiene dos problemas.

Primero: el clon se agrega al cuerpo. Dependiendo de su CSS, su elemento puede cambiar los estilos, ya que antes de que comience, está dentro de otro elemento y durante el arrastre, estará directamente en el elemento del cuerpo.

Segundo: a veces el elemento DEBE moverse, y el clon deja el objeto allí.

Entonces, la solución para este problema es:

$(''.selector'').draggable({
    helper: ''clone'',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

Answer 3

Sin duda vale la pena prestar atención a la documentación

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

voluta

Tipo: booleano
Predeterminado: true
Si se establece en true , el contenedor se desplaza automáticamente mientras se arrastra.

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

Answer 4

También puede especificar qué tipos de elementos 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 cancelar para ignorar el evento en elementos secundarios especificados

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

Answer 5

Tuve un problema similar al permitir un arrastre entre dos divisiones automáticas de desbordamiento. Con la ayuda de las respuestas anteriores, encontré 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''

Answer 6

appendTo

Elemento, SelectorDefault: ''padre''

El elemento pasado o seleccionado por la opción appendTo se utilizará como el contenedor del ayudante que se puede arrastrar durante el arrastre. De forma predeterminada, el asistente se agrega al mismo contenedor como el que se puede arrastrar.

Ejemplos de código Inicializa un objeto que se puede arrastrar con la opción appendTo especificada.

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