unappend - remove id jquery

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

Question

Estoy usando jQuery, draggable 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 código de inicialización .draggable() :

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

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

Answer 1

¿Por qué no tomar la posición del cursor? Estoy usando el complemento ordenable y lo soluciono con este código:

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({''top'':e.pageY});
}

Answer 2

Dejé de usar jQueryUi y se movió para usar un mejor complemento llamado jquery.even.drag , un tamaño de código mucho más pequeño, sin toda la mierda que jQueryUI tiene.

He creado una página de demostración con este complemento dentro de un contenedor que tiene una posición: fija

Demo

Espero que esto ayude a alguien, porque este problema es GRANDE.

Answer 3

Elimino el desbordamiento:

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

¡Y funciona perfectamente!

Answer 4

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.

Answer 5

Este error se trasladó a http://bugs.jqueryui.com/ticket/6817 y, desde hace aproximadamente 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 esperar la versión 1.10.4 que debe contener esta corrección .

Editar: parece que este arreglo ahora puede ser parte de 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).

Answer 6

Este podría ser un informe de error relacionado, ha existido desde hace 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. Usar position:absolute; en tu css. Los elementos absolutamente posicionados no parecen verse afectados.

2. Asegúrese de que el elemento principal (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 manualmente la solución sugerida en el informe de fallas anterior y pruebe a fondo 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 suceda en todos los navegadores, puede colocar estos hacks 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;
   }
});

Answer 7

Esto es lo que funcionó para mí, después de adaptar todo lo que he leído sobre el problema.

$(this).draggable({
  ...
  start: function (event, ui) {
    $(this).data("scrollposTop", $(''#elementThatScrolls'').scrollTop();
    $(this).data("scrollposLeft", $(''#elementThatScrolls'').scrollLeft();
  },
  drag: function (event, ui) {
    ui.position.top += $(''#elementThatScrolls'').scrollTop();
    ui.position.left += $(''#elementThatScrolls'').scrollLeft();
  },
  ...
}); 

* elementThatScrolls es el padre o ancestro con overflow: auto;

Mejora la posición del elemento de desplazamiento y aumenta la posición del ayudante cada vez que se mueve / arrastra.

Espero que ayude a alguien, ya que perdí mucho tiempo en esto.

Answer 8

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;
},

Answer 9

Esto parece hacer la solución sin necesidad de utilizar la posición: absoluta en el elemento primario :)

$("body").draggable({
     drag: function(event, ui) { 
         return false; 
     } 
});

Answer 10

Estoy utilizando JQuery que se puede arrastrar en Firefox 21.0, y estoy teniendo el mismo problema. El cursor se mantiene una pulgada por encima de la imagen auxiliar. Creo que este es un problema en el Jquery que aún no se ha resuelto. Encontré una solución a este problema, que está usando la propiedad "cursorAt" del arrastrable. Lo usé de la siguiente manera, pero uno puede cambiar esto de acuerdo a sus requerimientos.

$(''.dragme'').draggable({
helper: ''clone'',    
cursor: ''move'',    
cursorAt: {left: 50, top: 80}
});

Nota: Esto se aplicará a todos los navegadores, por lo tanto, después de usar este código, verifique su página en todos los navegadores para obtener las posiciones correctas superior e izquierda.

Answer 11

Logré solucionar el mismo problema añadiendo display: inline-block a los elementos arrastrados

Agregar position: relative NO funcionó para mí (jQuery lo anula con position: absolute al inicio del arrastre)

Versiones jQuery usadas:

• jQuery - 1.7.2
• jQuery UI - 1.11.4

Answer 12

No estoy completamente seguro de que esto funcione en todos los casos, pero esta solución que acabo de hacer para mí en todas las diversas situaciones que tuve que probar (y donde las soluciones propuestas anteriores dadas aquí y en todas partes fallaron)

(function($){
$.ui.draggable.prototype._getRelativeOffset = function()
{
    if(this.cssPosition == "relative") {
        var p = this.element.position();
        return {
            top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
            left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
        };
    } else {
        return { top: 0, left: 0 };
    }
};
}(jQuery));

(Lo presenté al rastreador jQuery.ui para ver qué piensan al respecto ... sería fantástico si finalmente se corrigiera ese error de 4 años: /)

Answer 13

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 funcionan 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'').

Answer 14

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.

Answer 15

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 alguno de los elementos principales tiene una position establecida en ''relativa''. Tuve que reorganizar mi marcado y modificar mi CSS, pero al eliminar esta propiedad de todos los padres, pude hacer que .sortable() funcionara correctamente en todos los navegadores.

Answer 16

Probé varias respuestas aquí, incluida la actualización de jQuery y encontré que esto funcionó para mí. Probé esto en los últimos Chrome e IE. Supongo que esto será un problema con diferentes soluciones dependiendo de su diseño de interfaz de usuario.

$(''{selector}'').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});

Answer 17

Tuve el mismo problema y descubrí que todo esto se debía a una clase de barra de navegación de arranque "navbar-fixed-top" con una posición para fija, que bajaba por mi <body> 60px más bajo que <html> arriba. Entonces, cuando estaba moviendo formularios arrastrables en mi sitio, el cursor aparecía 60 píxeles encima de la forma.

Puede ver que en la herramienta de depuración de Chrome, en la interfaz de Elements, haga clic en la etiqueta <body> y verá un espacio entre la parte superior y el cuerpo.

Ya que estoy usando esta barra de navegación en todas mis aplicaciones y no quería modificar mi llamada de inicialización para arrastrar (según el procedimiento de DarthJDG) para cada formulario. Decidí extender el widget arrastrable de esta manera y simplemente agregar un yOffset en mi inicialización arrastrable.

(function($) {
  $.widget("my-ui.draggable", $.ui.draggable, {
    _mouseDrag: function(event, noPropagation) {

      //Compute the helpers position
      this.position = this._generatePosition(event);
      this.positionAbs = this._convertPositionTo("absolute");

      //Call plugins and callbacks and use the resulting position if something is returned
      if (!noPropagation) {
        var ui = this._uiHash();
        if(this._trigger(''drag'', event, ui) === false) {
          this._mouseUp({});
          return false;
        }
        this.position = ui.position;
      }
      // Modification here we add yoffset in options and calculation
      var yOffset = ("yOffset" in this.options) ? this.options.yOffset : 0;

      if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+''px'';
      if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top-yOffset+''px'';
      if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

      return false;
    }
  });
})(jQuery);

Ahora cuando inicializo el elemento / formulario que se puede arrastrar en un sitio usando la barra de navegación bootstrap:

// Make the edit forms draggable
$("#org_account_pop").draggable({handle:" .drag_handle", yOffset: 60});

Por supuesto, tendrá que experimentar para determinar el yOffset correcto según su propio sitio.

Gracias de todos modos a DarthJDG que me indicó la dirección correcta. ¡Aclamaciones!

Answer 18

Tuve un problema similar, solo con IE 10 en ejecución en Windows 8. Todos los otros navegadores funcionaron bien. Quitar cursorAt: {top: 0} resolvió el problema.

Answer 19

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);
         }
        });