Skip to content
Related Articles

Related Articles

How to move an element to left, right, up and down using arrow keys ?
  • Last Updated : 17 Sep, 2019

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:
My Personal Notes arrow_drop_up
Recommended Articles
Page :