Q:

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

mhmadesk
Save to bookmark
|
2022-05-18
|
  419 
Very Easy
0

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

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery keydown() method

You can use the jQuery keydown() method in combination with the animate() method to move an element such as <div> in left, right, up and down direction through pressing the corresponding arrow keys on the keyboard. Let's check out an example to see how this works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Move DIV Element with Arrow Keys</title>
<style>
    .box{
        width: 100px;
        height: 100px;
        position: relative;
        margin: 200px auto 0;
        background: yellowgreen;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).keydown(function(e){
    switch (e.which){
    case 37:    //left arrow key
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:    //up arrow key
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:    //right arrow key
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:    //bottom arrow key
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }
});
</script>
</head>
<body>
    <p><strong>Note:</strong> Click inside the viewport and press the arrow keys to move the box.</p>
    <div class="box"></div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to animate the opacity of an element on mouse ... >>
<< How to check if an element exists in jQuery...