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

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.