Pregunta jQuery arrastrable muestra ayuda en el lugar incorrecto después de la página desplazada


Estoy usando jQuery arrastrable y droppable para un sistema de planificación de trabajo que estoy desarrollando. Los usuarios arrastran trabajos a un día o usuario diferente, y luego los datos se actualizan usando una llamada ajax.

Todo funciona bien, excepto cuando me desplazo hacia abajo en la página principal (los trabajos aparecen en un planificador de semana grande que excede la parte inferior de la ventana de mi navegador). Si trato de arrastrar un elemento arrastrable aquí, el elemento aparece sobre el cursor de mi mouse con la misma cantidad de píxeles que he desplazado hacia abajo. El estado de desplazamiento sigue funcionando bien y la funcionalidad funciona pero no se ve bien.

Estoy usando jQuery 1.6.0 y jQuery UI 1.8.12.

Estoy seguro de que hay una función de compensación que necesito agregar, pero no sé dónde aplicarla, o si hay una mejor manera. Aquí está mi .draggable() código de inicialización:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

¿Alguna idea de lo que puedo hacer para arreglar esto?


76
2018-04-26 14:31


origen


Respuestas:


Este podría ser un informe de error relacionado, ha estado presente por bastante tiempo: http://bugs.jqueryui.com/ticket/3740

Parece suceder en todos los navegadores que probé (Chrome, FF4, IE9). Hay algunas formas de evitar este problema:

1. Utilizar position:absolute; en tu css. Los elementos absolutamente posicionados no parecen verse afectados.

2. Asegúrese de que el elemento padre (evento si es el cuerpo) tiene overflow:auto; conjunto. Mi prueba mostró que esta solución corrige la posición, pero desactiva la funcionalidad de desplazamiento automático. Todavía puede desplazarse usando la rueda del mouse o las teclas de flecha.

3. Aplique la solución sugerida en el informe de fallas anterior manualmente y pruebe exhaustivamente si causa otros problemas.

4. Espere una solución oficial. Está programado para jQuery UI 1.9, aunque se ha pospuesto algunas veces en el pasado.

5. Si confía en que esto suceda en todos los navegadores, puede colocar estos ataques en los eventos de arrastrables afectados para corregir los cálculos. Sin embargo, hay que probar muchos navegadores diferentes, por lo que solo se debe utilizar como último recurso:

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});

101
2018-04-26 20:09



Esta solución funciona sin ajustar el posicionamiento de nada, solo clona el elemento y lo coloca absolutamente en posición.

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

El helper puede ser una función que necesita devolver el elemento DOM para arrastrar.


41
2017-09-28 15:04



Esto funcionó para mí:

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},

11
2018-01-24 19:02



Parece que este error aparece muy a menudo, y cada vez que hay una solución diferente. Ninguno de los anteriores o cualquier otra cosa que encontré en Internet funcionó. Estoy usando jQuery 1.9.1 y Jquery UI 1.10.3. Así es como lo arreglé:

$(".dragme").draggable({
  appendTo: "body",
  helper: "clone",
  scroll: false,
  cursorAt: {left: 5, top: 5},
  start: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  },
  drag: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  }
});

Funciona en FF, IE, Chrome, todavía no lo he probado en otros navegadores.


7
2018-06-04 06:22



Perdón por escribir otra respuesta. Como ninguna de las soluciones en la respuesta anterior podría ser utilizada por mí, hice muchas búsquedas en Google e hice muchas ediciones menores frustrantes antes de encontrar otra solución razonable.

Este problema parece ocurrir cada vez que alguna de los elementos padres tienen position establecido en 'relativo'. Tuve que reorganizar mi marcado y modificar mi CSS, pero al eliminar esta propiedad de todos los padres, pude obtener .sortable()funciona correctamente en todos los navegadores.


6
2017-07-13 17:01



Este error se movió a http://bugs.jqueryui.com/ticket/6817 y, desde hace alrededor de 5 días (16 de diciembre de 2013, aproximadamente) parece que finalmente se ha corregido. La sugerencia en este momento es usar la última versión de desarrollo de http://code.jquery.com/ui/jquery-ui-git.js o espera versión 1.10.4 que debería contener esta revisión.

Editar: Parece que esta solución podría ser ahora parte de http://bugs.jqueryui.com/ticket/9315 que no está programado para caer hasta la versión 1.11. El uso de la versión de jQuery de control de código fuente anterior parece arreglar el problema para mí y para @Scott Alexander (comentario más abajo).


5
2017-12-22 02:04



Elimino el desbordamiento:

html {overflow-y: scroll; background: #fff;}

¡Y funciona perfectamente!


4
2017-09-27 08:27



Parece notable que este error no se haya corregido durante tanto tiempo. Para mí es un problema en Safari y Chrome (es decir, los navegadores webkit) pero no en IE7 / 8/9 ni en Firefox, que funciona bien.

Encontré que configurarlo de forma absoluta o fija, con o sin! Importante, no me ayudó, así que al final agregué una línea a mi función de controlador de arrastre:

ui.position.top += $( 'body' ).scrollTop();

Esperaba tener que hacer esa línea específica de webkit, pero curiosamente funcionó bien en todas partes. (Espere un comentario de mí pronto diciendo 'no, en realidad estropeó todos los otros navegadores').


3
2017-08-15 11:21



lo que he hecho es:

$("#btnPageBreak").draggable(
        {
          appendTo: 'body',
          helper: function(event) {
            return '<div id="pageBreakHelper"><img  id="page-break-img"  src="page_break_cursor_red.png" /></div>';
          },
          start: function(event, ui) {
          },
          stop: function(event, ui) {
          },
          drag: function(event,ui){
            ui.helper.offset(ui.position);
         }
        });

3
2018-04-13 13:53