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

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.

QCM jQuery

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

  • novembre 24, 2021 à 9:41
    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

Votre adresse e-mail ne sera pas publiée.