Open In App
Related Articles

How to move an element to left, right, up and down using arrow keys ?

Improve Article
Improve
Save Article
Save
Like Article
Like

The task is to move an element to left, right, up and down using arrow keys in jquery, we can use the jQuery keydown() method along with the .animate() method.
The keydown() method triggers the keydown event whenever User presses a key on the keyboard.
Syntax:

$(selector).keydown(function)

Approach:

  1. The .keydown() method is to used check whether any key is pressed or not, and return which key is pressed.
  2. Checking which key is triggered is determined by keycodes. Keycodes are followed:
    • left = 37
    • up = 38
    • right = 39
    • down = 40
  3. The movement of the element according to the key pressed is done using .animate() method

Example 1: Moving element to up using Up arrow key.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Move an element to left, right,
      up and down using arrow keys
    </title>
    <script src=
    </script>
    <style type="text/css">
        .box {
            float: center;
            background: green;
            margin: 100px auto 0;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 24px;
            border: 1px solid #000000;
            text-align: center;
            position: relative;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
         GeeksforGeeks 
        </h1>
        <h3>
          Move an element to UP using UP arrow keys
        </h3>
        <h4>.keydown() method is used</h4>
        <div class="box">UP</div>
        <script type="text/javascript">
            $(document).keydown(function(e) {
                if (e.which == '38') { //up arrow key
                    $(".box").finish().animate({
                        top: "-=50"
                    });
                }
            });
        </script>
    </center>
</body>
</html>                    


Output:

  • Before press Up arrow key:
  • After press Up arrow key:

Example 2: Moving element to Down using Down arrow keys.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Move an element to left, right,
      up and down using arrow keys
    </title>
    <script src=
    </script>
    <style type="text/css">
        .box {
            float: center;
            background: green;
            margin: 10px auto 0;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 24px;
            border: 1px solid #000000;
            text-align: center;
            position: relative;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
          GeeksforGeeks 
        </h1>
        <h3>
          Move an element to Down using Down arrow keys
        </h3>
        <h4>.keydown() method is used</h4>
        <div class="box">DOWN</div>
        <script type="text/javascript">
            $(document).keydown(function(e) {
                if (e.which == '40') { //down arrow key
                    $(".box").finish().animate({
                        top: "+=50"
                    });
                }
            });
        </script>
    </center>
</body>
  
</html>                             


Output:

  • Before press Down arrow key:
  • After press Down arrow key:

Example 3: Moving element to Left using Left arrow keys.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Move an element to left, right, 
      up and down using arrow keys
    </title>
    <script src=
    </script>
    <style type="text/css">
        .box {
            float: center;
            background: green;
            margin: 10px auto 0;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 24px;
            border: 1px solid #000000;
            text-align: center;
            position: relative;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
          GeeksforGeeks 
        </h1>
        <h3>
          Move an element to Left using Left arrow keys
        </h3>
        <h4>.keydown() method is used</h4>
        <div class="box">LEFT</div>
        <script type="text/javascript">
            $(document).keydown(function(e) {
                if (e.which == '37') { //left arrow key
                    $(".box").finish().animate({
                        left: "-=50"
                    });
                }
            });
        </script>
    </center>
</body>
  
</html>      


Output:

  • Before press Left arrow key:
  • After press Left arrow key:

Example 4: Moving element to Right using Right arrow keys.




<!DOCTYPE html>
<html>
  
<head>
    <title>
      Move an element to left, right, 
      up and down using arrow keys
    </title>
    <script src=
    </script>
    <style type="text/css">
        .box {
            float: center;
            background: green;
            margin: 10px auto 0;
            width: 100px;
            height: 100px;
            color: white;
            font-size: 24px;
            border: 1px solid #000000;
            text-align: center;
            position: relative;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;"
          GeeksforGeeks 
        </h1>
        <h3>
          Move an element to Right using Right arrow keys
        </h3>
        <h4>.keydown() method is used</h4>
        <div class="box">RIGHT</div>
        <script type="text/javascript">
            $(document).keydown(function(e) {
                if (e.which == '39') { //Right arrow key
                    $(".box").finish().animate({
                        left: "+=50"
                    });
                }
            });
        </script>
    </center>
</body>
  
</html>       


Output:

  • Before press Right arrow key:
  • After press Right arrow key:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Sep, 2019
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials