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

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:
The .keydown() method is to used check whether any key is pressed or not, and return which key is pressed.Checking which key is triggered is determined by keycodes. Keycodes are followed:left = 37up = 38right = 39down = 40The movement of the element according to the key pressed is done using .animate() method
The .keydown() method is to used check whether any key is pressed or not, and return which key is pressed.
Checking which key is triggered is determined by keycodes. Keycodes are followed:left = 37up = 38right = 39down = 40
left = 37
up = 38
right = 39
down = 40
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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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="https://code.jquery.com/jquery-1.12.4.min.js">    </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:
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.