2016-04-24 1 views
0

Avec la création CSS Metro UI un draggable est assez facile:Comment enregistrer la positon de draggable avec Metro UI CSS?

<div data-role="draggable"></div> 

Il est amusant pour l'utilisateur final pour faire glisser un élément comme celui-ci, et il serait même bien si je pouvais sauver la position de draggable (après avoir été traîné) pour la prochaine visite de l'utilisateur. Alors, comment puis-je faire cela?

+1

Avec ce genre de choses, il est typique dans lequel javascript manipule est css comme un attribut de style (et le fait dans ce Cas). Vous pouvez simplement enregistrer son attribut de style dans [localStorage] (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). –

+0

@MichaelSchwartz comment devrais-je détecter quand l'élément est déplacé, en utilisant JavaScript pour que je puisse l'enregistrer? – anshabhi

+0

Oui, avec JavaScript, vous pouvez utiliser [souris ou événements tactiles] (http://www.html5rocks.com/fr/mobile/touchandmouse/) pour détecter le moment où l'élément est déplacé. –

Répondre

1

Avec ce genre de choses, il est typique dans lequel le javascript poignées il est css un attribut de style (et le fait dans ce cas). Vous pouvez simplement enregistrer son attribut de style dans localStorage.

HTML:

<div class="box" data-role="draggable"></div> 

JavaScript/JQuery:

if (localStorage.getItem("elmPos")) { 
    $(".box").attr("style", localStorage.getItem("elmPos")) 
} 

$(".box").on("mousedown touchstart mousemove touchmove mouseup touchend", function() { 
    localStorage.setItem("elmPos", $(".box").attr("style")) 
})