Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript déplacer une div

déplacer une div

11 réponses
Avatar
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 + "\n";
//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>
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Gloops
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);
Avatar
Une Bévue
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.
Avatar
Gloops
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 ?
Avatar
Une Bévue
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 :
<https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode&gt;

avec ça j'ai retrouvé les codes des 4 flèches.
Avatar
SAM
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
Avatar
SAM
Le 15/12/14 06:17, Une Bévue a écrit :

ben j'ai juste utilisé event.keyCode :
<https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode&gt;

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
Avatar
Une Bévue
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";

?
Avatar
SAM
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
Avatar
Une Bévue
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 )))
Avatar
Gloops
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.
1 2