Posición div ligeramente desplazada al usar jquery que se puede arrastrar con almacenamiento local HTML

Tengo un elemento div arrastrable que usa HTML 5 localStorage para recordar su posición en la página de los usuarios. Esto funciona bienPosición div ligeramente desplazada al usar jquery que se puede arrastrar con almacenamiento local HTML

También estoy usando el window.addEventListener para actualizar la posición si el div se arrastró en otra pestaña abierta. Esto funciona, pero la posición del div en una pestaña del navegador se compensa ligeramente con el div en la otra pestaña. ¿Alguien sabe qué está causando esto?

Un ejemplo básico está a continuación. Guárdelo como un archivo html y ábralo en dos pestañas diferentes para ver qué está sucediendo.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    .note 
    { 
     position: absolute; 
     width:200px; 
     height:220px; 
     background: #2E2E2E; 
     top: 50px; 
     left: 50px; 

    transform:rotate(7deg); 
    -ms-transform:rotate(7deg); 
    -moz-transform:rotate(7deg); 
    -webkit-transform:rotate(7deg); 
    -o-transform:rotate(7deg); 
    } 


    </style> 

    <script type="text/javascript"> 
     $(function() { 


      var note = $(".note"); 
      updatePosition(note); 

      note.draggable({ stop: function() { 

       var left = $(this).position().left; 
       var top = $(this).position().top; 

       localStorage.setItem("left", left); 
       localStorage.setItem("top", top); 

      } 
      }); 

      window.addEventListener("storage", function (e) { 
       updatePosition(note); 
      }, 

      false); 


     }); 

      function updatePosition(note) { 

      var left = localStorage.getItem("left"); 
      var top = localStorage.getItem("top"); 
      note.css({ left: left + "px", top: top + "px" }); 

      } 
    </script> 

</head> 
<body> 

<div class="note"></div> 

</body> 
</html>

ACTUALIZACIÓN: Son las propiedades de transformación de CSS que están causando el desplazamiento.

Fuente

2012-05-18 kmb64

+1, excelente pregunta. Ojalá más personas hicieran preguntas de esta manera ... –

Esta es una pregunta muy útil, ya que podemos pegar el código fuente directamente en un archivo localmente, sin tener que preocuparnos de dónde se incluirá la biblioteca jquery. –

Parece que tengo este archivo abierto en 2 pestañas diferentes y muevo un div, el otro div se moverá también en la otra pestaña. ¡Extraño! –

¿Has visto este error? http://bugs.jquery.com/ticket/8362

Veo que su JS está haciendo todo bien pero jQuery está devolviendo el valor incorrecto de .css().

Aquí está un ejemplo de trabajo: http://db.tt/gCHuZ7zz

Y los cambios de código relevantes:

 note.draggable({ stop: function() { 

      var left = this.offsetLeft; 
      var top = this.offsetTop; 

      localStorage.setItem("left", left); 
      localStorage.setItem("top", top); 

     } 
     }); 



     function updatePosition(note) { 

     var left = localStorage.getItem("left"); 
     var top = localStorage.getItem("top"); 
     note.css({ left: left + "px", top: top + "px" }); 

     note[0].offsetTop = top; 
     note[0].offsetLeft = left 

     }

Fuente

2012-05-18 05:42:39 Jeff

¿Ha notado que la transformación css también hace que el div sea un poco ágil/travieso cuando hace clic en él para arrastrarlo? Esto se parece a otro error de jQuery: http://bugs.jqueryui.com/ticket/6844. ¿Conoces cualquier solución a esto también? – kmb64

No hay experiencia personal, pero parece que hay un complemento jQuery Transformable que tiene una mejor función de arrastrar() ... el sitio de alojamiento no funciona, pero he aquí un Fiddle que lo usa: http://jsfiddle.net/aflin/MhGPU/ – Jeff

Creo que no hay ningún problema en las propiedades de transformación de la clase css. En realidad, es el comportamiento del almacenamiento local html5.

almacenamiento local:

Valores persisten más allá de las ventanas y los navegadores de toda la vida.
Los valores se comparten en todas las ventanas o pestañas que se ejecutan en el mismo origen.

Ahora, observe el código que configuró y obtenga la posición de div en el almacenamiento local. Y cuando div se arrastra, se activa el detector de eventos de 'ventana' que obtiene la posición del almacenamiento local y actualiza la posición. Entonces, es por eso que en diferentes pestañas de un navegador div se conserva la misma posición.

Y deberías probar este

var left = this.offsetLeft; 
var top = this.offsetTop;

Fuente

2012-05-18 05:09:50 Talha

he encontrado el problema aquí usando inspector de Chrome.

$(".note").position() es diferente de la verdadera left y top de note

Esto se debe a que el elemento girado, se puede ver por sí mismo mediante la eliminación de la transform en el css. Una solución se puede encontrar aquí: jQuery .position() strangeness while using CSS3 rotate attribute

Fuente

2012-05-18 05:42:27 TiansHUo

tratar

var left = this.offsetLeft; 
    var top = this.offsetTop;

en lugar de

var left = $(this).position().left; 
    var top = $(this).position().top;

Fuente

2012-05-18 05:49:35 Rab

Posición div ligeramente desplazada al usar jquery que se puede arrastrar con almacenamiento local HTML

Respuesta

Cuestiones relacionadas