Div posizione leggermente sfalsata quando si utilizza jquery trascinabile con memoria locale HTML

Ho un elemento div trascinabile che utilizza HTML 5 localStorage per ricordare la sua posizione nella pagina utenti. Funziona beneDiv posizione leggermente sfalsata quando si utilizza jquery trascinabile con memoria locale HTML

Sto anche utilizzando lo window.addEventListener per aggiornare la posizione se il div è stato trascinato in un'altra scheda aperta. Funziona ma la posizione del div in una scheda del browser è leggermente sfalsata rispetto al div in un'altra scheda. Qualcuno sa che cosa sta causando questo?

Un esempio di base è riportato di seguito. Salvalo come un file html e aprilo in due diverse schede per vedere cosa sta succedendo.

<!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>

UPDATE: Le sue le proprietà CSS di trasformazione che stanno causando l'offset.

fonte

2012-05-18 kmb64

+1, ottima domanda. Vorrei che più persone facessero domande in questo modo ... –

Questa è una domanda davvero comoda, poiché è possibile incollare il codice sorgente direttamente in un file localmente, senza doversi preoccupare di dove verrà inclusa la libreria jQuery. –

Sembra che se ho questo file aperto in 2 diverse schede e sposto un div, l'altro div si sposterà anche sull'altra scheda. Strano! –

Avete visto questo errore? http://bugs.jquery.com/ticket/8362

Vedo che il tuo JS sta facendo tutto bene, ma jQuery restituisce il valore errato da .css().

Ecco un esempio di lavoro: http://db.tt/gCHuZ7zz

E le modifiche del codice in materia:

 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 

     }

fonte

2012-05-18 05:42:39 Jeff

Hai notato che la trasformazione css fa sì che il div sia un po 'scattante/jolty quando fai clic su di esso per trascinare? Questo sembra un altro bug di jQuery: http://bugs.jqueryui.com/ticket/6844. Conoscere qualsiasi lavoro intorno a questo aswell? – kmb64

Nessuna esperienza personale, ma sembra che ci sia un plugin jQuery Transformable che ha una funzione draggable() migliore ... il sito di hosting è inattivo ma qui c'è un Fiddle che lo usa: http://jsfiddle.net/aflin/MhGPU/ – Jeff

Penso che non ci siano problemi nelle proprietà di trasformazione della classe css. In realtà, è il comportamento della memoria locale html5.

Local Storage:

Valori persistono oltre le finestre e browser vita.
I valori sono condivisi su ogni finestra o scheda in esecuzione nella stessa origine.

Ora, guarda il codice che hai impostato e ottieni la posizione di div nella memoria locale. E quando div è trascinato, viene attivato il listener di eventi 'window' che ottiene la posizione dalla memoria locale e aggiorna la posizione. Quindi, ecco perché su diverse schede di un browser div mantiene la stessa posizione.

E si dovrebbe provare questo

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

fonte

2012-05-18 05:09:50 Talha

ho trovato il problema qui utilizzando ispettore di Chrome.

$(".note").position() è diversa da quella reale e lefttop di note

Questo perché è ruotato l'elemento, si può vedere di persona rimuovendo il transform nel CSS. Una correzione può essere trovata qui: jQuery .position() strangeness while using CSS3 rotate attribute

fonte

2012-05-18 05:42:27 TiansHUo

provare

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

invece di

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

fonte

2012-05-18 05:49:35 Rab

Div posizione leggermente sfalsata quando si utilizza jquery trascinabile con memoria locale HTML

risposta

Problemi correlati