déplacer une div

Le
Une Bévue
Je souhaite déplacer (haut/bas, droite/gauche) de 10px un marker dans
une div. Commandé par les flèches haut/bas/droite/gauche du clavier.

Bon ça "marchotte" mais quand je clique sur la flèche gauche, ça va bien
à gauche mais de 30px environ.
quand je clique sur droite, ça va -- aussi à gauche -- mais de 10px.
seuls les flèches vers le haut et le bas fonctionne "as expected"

le code :
<!doctype html>
<html>
<head>
<!--
http://on-air.hiseo.fr/html5/encodage-caracteres-declaration-html5/ -->
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Flèches</title>
<style>
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
header {
position: absolute;
top: 0;
width: 100%;
height: 60px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
.img {
position: absolute;
top: 60px;
width: 100%;
margin: 0;
padding: 0;
}
.img img {
width: 100%;
margin: 0;
padding: 0;
}
#marker {
position: absolute;
left: 50%;
top: 260px;
z-index: 9999;
}
.svg {
width: 50px;
height: 41px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 190px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
</style>
<script>
(function() {
var arrows = {
LEFT: {key: 37, callback: leftArrow},
UP: {key: 38, callback: upArrow},
RIGHT: {key: 39, callback: rightArrow},
DOWN: {key: 40, callback: downArrow}
};
var stdoutElt, markerElt;
window.addEventListener('load', start, false);
function start(event) {
stdoutElt = document.getElementById('stdout');
markerElt = document.getElementById('marker');
document.body.addEventListener('keyup', keyupDispatch,
false);//keydown | keypress
}
function keyupDispatch(event) {
for(var arrow in arrows) {
if(arrows[arrow].key == event.keyCode) {
arrows[arrow].callback();
}
}
}
function leftArrow() {
write2STDOUT("You pressed the 'LEFT' arrow.");
markerMove(-10.0, 0)
}
function upArrow() {
write2STDOUT("You pressed the 'UP' arrow.");
markerMove(0, -10.0)
}
function rightArrow() {
write2STDOUT("You pressed the 'RIGHT' arrow.");
markerMove(10.0, 0)
}
function downArrow() {
write2STDOUT("You pressed the 'DOWN' arrow.");
markerMove(0, 10.0)
}
function markerMove(dx, dy) {
var rect = markerElt.getBoundingClientRect();
if(dx != 0) {
markerElt.style.left = parseInt((rect.left + dx), 10)
+ "px";
markerElt.style.right = parseInt((rect.right + dx), 10)
+ "px";
}
if(dy != 0) {
markerElt.style.top = parseInt((rect.top + dy), 10)
+ "px";
markerElt.style.bottom = parseInt((rect.bottom + dy), 10)
+ "px";
}
var rect_new = markerElt.getBoundingClientRect();
write2STDOUT("dx = " + dx + ", old left + " + rect.left + ",
new left = " + rect_new.left + ", old top = " + rect.top + ", new top =
" + rect_new.top);
}
function write2STDOUT(txt) {
stdoutElt.innerHTML += txt + "";
//stdoutElt.innerHTML = txt;
}
})()
</script>
</head>
<body>
<header><h3>Flèches TEST</h3></header>
<!-- section>
<div class='img'><img
src="http://lorempixel.com/1280/400/abstract"/></div>
</section -->
<footer><pre id='stdout'></pre></footer>
<div id="marker"><img class="svg" src="img/map-marker.svg"/></div>
</body>
</html>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Gloops
Le #26328998
Une Bévue a écrit le 13/12/2014 16:14 :
Je souhaite déplacer (haut/bas, droite/gauche) de 10px un marker dans
une div. Commandé par les flèches haut/bas/droite/gauche du clavier .

Bon ça "marchotte" mais quand je clique sur la flèche gauche, ça va bien
à gauche mais de 30px environ.
quand je clique sur droite, ça va -- aussi à gauche -- mais de 10px .
seuls les flèches vers le haut et le bas fonctionne "as expected"...



Bonjour,

Je m'aperçois qu'en partant d'une position gauche de 465,5, si j'appuie
sur droite, j'ai "485px" dans markerElt.style.left (au besoin on peut
investiguer du côté du séparateur décimal), mais que
markerElt.getBoundingClientRect().left me retourne 465.

ça ne résout pas la question, mais il me semble bien que ça situe c e
qu'il y a à comprendre pour faire tourner la chose.

Je me demande si style.left est le bon moyen de déplacer l'élément, dans
l'affirmative si il y a quelque chose à rafraîchir avant d'interroger
les nouvelles propriétés.


function markerMove(dx, dy) {
var rect = markerElt.getBoundingClientRect();
write2STDOUT(dx);
if(dx != 0) {
write2STDOUT("old_left : " + rect.left + "new left : " +
(rect.left + 10));
markerElt.style.left = parseInt((rect.left + dx), 10 )
+ "px";
markerElt.style.right = parseInt((rect.right + dx), 10 )
+ "px";
write2STDOUT(markerElt.style.left);
write2STDOUT(markerElt.getBoundingClientRect().left);
Une Bévue
Le #26329029
Le 14/12/14 12:37, Gloops a écrit :
Je m'aperçois qu'en partant d'une position gauche de 465,5, si j'appuie
sur droite, j'ai "485px" dans markerElt.style.left (au besoin on peut
investiguer du côté du séparateur décimal), mais que
markerElt.getBoundingClientRect().left me retourne 465.



Oui, merci beaucoup.

En fait j'ai résolu le problème ce matin, il s'était agravé entre-temps.
Je pense que mon erreur était de mettre le style dans les css au lieu
d'être in-line :
<div id="marker" style="position: absolute;left: 296px;top:
110px;z-index: 9999;"><img class="svg"
src="img/map-marker-green.svg"/></div>

ensuite avec #getBoundingClientRect(), je ne sais pas ce qu'il se passe,
peut-être est-ce que les propriétés retournées sont en lecture seule,
mais un parseInt(..., 10) ne donne rien ça retourne quand même un nombre
décimal si je fais :
for(var prop in rect) {
if(rect.hasOwnProperty(prop)) {
rect[prop] = parseInt(rect[prop]);
}
}

donc j'ai résolu "tout bêtement" avec le style in-line, et en utilisant :
function markerMove(dx, dy) {
markerElt.style.left = (parseInt(markerElt.style.left, 10) +
dx) + "px";
markerElt.style.top = (parseInt(markerElt.style.top , 10) +
dy) + "px";
}


voili-voilou.
Gloops
Le #26329113
Une Bévue a écrit le 14/12/2014 15:00 :
Le 14/12/14 12:37, Gloops a écrit :
Je m'aperçois qu'en partant d'une position gauche de 465,5, si j'app uie
sur droite, j'ai "485px" dans markerElt.style.left (au besoin on peut
investiguer du côté du séparateur décimal), mais que
markerElt.getBoundingClientRect().left me retourne 465.



Oui, merci beaucoup.

En fait j'ai résolu le problème ce matin, il s'était agravé ent re-temps.
Je pense que mon erreur était de mettre le style dans les css au lieu
d'être in-line :
<div id="marker" style="position: absolute;left: 296px;top:
110px;z-index: 9999;"><img class="svg"
src="img/map-marker-green.svg"/></div>

ensuite avec #getBoundingClientRect(), je ne sais pas ce qu'il se passe ,
peut-être est-ce que les propriétés retournées sont en lecture seule,
mais un parseInt(..., 10) ne donne rien ça retourne quand même un n ombre
décimal si je fais :
for(var prop in rect) {
if(rect.hasOwnProperty(prop)) {
rect[prop] = parseInt(rect[prop]);
}
}

donc j'ai résolu "tout bêtement" avec le style in-line, et en utili sant :
function markerMove(dx, dy) {
markerElt.style.left = (parseInt(markerElt.style.left, 10) +
dx) + "px";
markerElt.style.top = (parseInt(markerElt.style.top , 10) +
dy) + "px";
}


voili-voilou.





Ah ... J'ai eu un doute au sujet du style, mais j'ai l'impression que je
loupais un autre maillon.

Bon ben très bien si ça marche.

Au fait pour la gestion des événements avec les touches tu as utilisé
quoi comme doc ?
Une Bévue
Le #26329133
Le 14/12/14 21:49, Gloops a écrit :
Au fait pour la gestion des événements avec les touches tu as utilisé
quoi comme doc ?



ben j'ai juste utilisé event.keyCode :

avec ça j'ai retrouvé les codes des 4 flèches.
SAM
Le #26329480
Le 14/12/14 15:00, Une Bévue a écrit :

donc j'ai résolu "tout bêtement" avec le style in-line, et en utilisant :
function markerMove(dx, dy) {
markerElt.style.left = (parseInt(markerElt.style.left, 10) +
dx) + "px";
markerElt.style.top = (parseInt(markerElt.style.top , 10) +
dy) + "px";
}



ou bien :
markerElt.style.left = markerElt.style.left.replace('px','') + dx + "px";


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26329489
Le 15/12/14 06:17, Une Bévue a écrit :

ben j'ai juste utilisé event.keyCode :

avec ça j'ai retrouvé les codes des 4 flèches.



<- 37
^ 38
-> 39
v 40



http://stephane.moriaux.pagesperso-orange.fr/truc/key_code
lastModified: 10/08/2006

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #26329488
Le 16/12/14 17:52, SAM a écrit :
markerElt.style.left = markerElt.style.left.replace('px','') + dx + "px";



ce ne serait pas plutôt (pour qu'il y ait addition) :
markerElt.style.left = parseInt(markerElt.style.left.replace('px',''),
10) + dx + "px";

?
SAM
Le #26329494
Le 16/12/14 18:06, Une Bévue a écrit :
Le 16/12/14 17:52, SAM a écrit :
markerElt.style.left = markerElt.style.left.replace('px','') + dx + "px";



ce ne serait pas plutôt (pour qu'il y ait addition) :
markerElt.style.left = parseInt(markerElt.style.left.replace('px',''),
10) + dx + "px";



en effet, il faut transformer en nombre le 1er membre de l'opération,
hop!

markerElt.style.left = +markerElt.style.left.replace(/px/,'')+dx+'px';

Ceci étant, je ne suis pas certain que :
markerElt.style.left = +markerElt.style.left.replace(/px/,'')+dx;
ne fonctionne pas aussi ?


Comme c'est un juste truc visuel on peut aussi faire varier les marges
de l'élément qui sera positionné en absolute dans un autre (bien calé)
Et même, peut-être, utiliser des class pour ce faire, avec l'avantage
que ça fonctionnera avec une FdS générale sans attribut style ajouté à
l'élément.

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #26329493
Le 16/12/14 18:05, SAM a écrit :
<- 37
^ 38
-> 39
v 40



bravo, tu auras une crotte en chocolat dans ta chaussette à Noël )))
Gloops
Le #26329807
Une Bévue a écrit le 16/12/2014 18:23 :
Le 16/12/14 18:05, SAM a écrit :
<- 37
^ 38
-> 39
v 40



bravo, tu auras une crotte en chocolat dans ta chaussette à Noël )) )




Eh eh.

Ou alors "les bases de l'assembleur" et "les interruptions du DOS" :)

Je dois avoir ça au fond d'une malle, quelque part chez le garde-meuble s.

Mais il me semble me souvenir qu'on trouve ça sur Internet.
Publicité
Poster une réponse
Anonyme