WayToLearnX » Développement Web » jQuery » Comment déplacer un élément avec les flèches du clavier en jQuery

Comment déplacer un élément avec les flèches du clavier en jQuery

Comment déplacer un élément avec les flèches du clavier en jQuery

juillet 4, 2019janvier 4, 2021 Amine KOUIS 1 Commentaire

Vous pouvez utiliser la méthode keydown() de jQuery en combinaison avec la méthode animate() pour déplacer un élément tel que <div> dans les directions gauche, droite, haut et bas en appuyant sur les flèches correspondantes du clavier. Découvrez l’exemple ci-dessous.

Code HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>déplacer un élément avec les flèches du clavier</title>
		<style type="text/css">
			/* Mettez le code css ici. */
		</style>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			// Mettez le code jQuery ici.
		</script>
	</head>
	<body>
		<p><b>Cliquez ici pour déplacer l'objet.</b></p>
		<div class="myDiv"></div>
	</body>
</html>

Code jQuery:

$(document).keydown(function(e){
    switch (e.which){
    case 37:    // flèche gauche
        $(".myDiv").finish().animate({
            left: "-=10"
        });
        break;
    case 38:    // flèche haut
        $(".myDiv").finish().animate({
            top: "-=10"
        });
        break;
    case 39:    // flèche droite
        $(".myDiv").finish().animate({
            left: "+=10"
        });
        break;
    case 40:    // flèche du bas
        $(".myDiv").finish().animate({
            top: "+=10"
        });
        break;
    }
});

Code CSS:

.myDiv {
    width: 150px;
    height: 53px;
    position: relative;
    margin: 100px auto 0;
    background: url("https://1.bp.blogspot.com/-I-a7SivlqkY/XR1iGIJh0FI/AAAAAAAAFEk/ynto7iWeqxkjhxH5UDMywUYHad3fFMHTACLcBGAs/s1600/carr2.png");
    background-repeat: no-repeat;
}

Résultat
Cliquez ici pour déplacer l'objet.

QCMs qui pourraient vous intéresser :

Une réflexion sur “Comment déplacer un élément avec les flèches du clavier en jQuery”

mehdi
novembre 24, 2021 à 9:41 pm
Permalien

comment limiter les mouvements pour que l’élément ne dépasse pas le cadre qui lui est destinée ?
Répondre

Laisser un commentaire Annuler la réponse