Open In App

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

Last Updated : 17 Sep, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

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:


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads