déplacer une div

Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Entraide Développement Développement Langage JavaScript déplacer une div

11 réponses

Une Bévue

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"...

le code :
<!doctype html>
<html>
<head>

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

<footer><pre id='stdout'></pre></footer>
<div id="marker"><img class="svg" src="img/map-marker.svg"/></div>
</body>
</html>

1 réponse

1 2

Gloops

17/12/2014 à 22:43

Une Bévue a écrit le 15/12/2014 06:17 :

Le 14/12/14 21:49, Gloops a écrit :
Au fait pour la gestion des événements avec les touches tu as util isé
quoi comme doc ?

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

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

Ah, oui, Mozilla je n'y pense pas toujours.

Pourtant, un temps les outils de débogage c'était sur IE, maintenant je
crois bien qu'ils ont laissé tomber. Alors que Firefox ...

1 2

déplacer une div

1 réponse

Veuillez sélectionner un problème