jQuery Draggable y problema de desbordamiento [cerrado]

Question

Tengo un efecto no deseado cuando arrastro un div desde un contenedor div que se configura como desbordamiento: scroll.

He encontrado un ejemplo de otra persona en la que ha tenido el problema, pero no he podido encontrar una solución

Ejemplo en el contenedor de pegado

Lo que sucede es que el desplazamiento se incrementa, puedo ver por qué este sería el comportamiento deseado si quisiera arrastrar a un destino dentro de la división desplazable, pero quiero poder llevarlo fuera de su alcance de desplazamiento.

Answer 1

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

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

  

desplazamiento

     

Tipo: Booleano
   Valor predeterminado: true
  Si se establece en true , el contenedor se desplaza automáticamente al arrastrar.

Todos los que entren aquí, aprendan de mi error, RT (F) M !!!

Answer 2

Tuve un problema similar al habilitar un arrastre entre dos divs de desbordamiento automático. 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 3

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 manera predeterminada, el ayudante se agrega al mismo contenedor que el que se puede arrastrar.

Ejemplos de código Inicialice un elemento arrastrable con la opción appendTo especificada.

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

Answer 4

La solución clónica 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 que el objeto esté allí.

Entonces, la solución para estos problemas es:

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

Answer 5

La configuración de la opción de desplazamiento no evita que los niños se oculten en el área de desbordamiento. He ideado un trabajo por turnos que usa la opción de ayuda. Échale un vistazo:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

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

elementos de jquery ui arrastrables no 'arrastrable' fuera de la división de desplazamiento

Answer 6

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>

Aplique esta propiedad de cancelación para ignorar el evento en elementos secundarios especificados

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