How to Move Element Position in JavaScript
- Use Arrow Keys to Move Element Position in JavaScript
-
Use
Arrow Keysto Move Element Position Using jQuery
This writing educates you about how to move element position in JavaScript. For instance, move the element towards the right if the right arrow key is pressed.
We can use the element.style property to move the element up, down, right, or left using keyboard arrow keys.
Use Arrow Keys to Move Element Position in JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Move Element</title>
</head>
<body>
<div class="circle"></div>
</body>
</html>
.circle {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: blue;
}
let myCircle = document.querySelector('.circle');
window.addEventListener('load', () => {
myCircle.style.position = 'absolute';
myCircle.style.left = 0;
myCircle.style.top = 0;
});
window.addEventListener('keyup', (event) => {
switch (event.key) {
case 'ArrowLeft':
myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';
break;
case 'ArrowRight':
myCircle.style.left = parseInt(myCircle.style.left) + 5 + 'px';
break;
case 'ArrowUp':
myCircle.style.top = parseInt(myCircle.style.top) - 5 + 'px';
break;
case 'ArrowDown':
myCircle.style.top = parseInt(myCircle.style.top) + 5 + 'px';
break;
default:
alert('Only Arrow Keys Are Allowed!');
}
});
OUTPUT:
In the above output, we use arrow keys to move the element up, down, left, and right. Firstly, we use querySelector() to select an element whose class is circle in this example, that element is a <div>.
Then, we use the load event, which will be triggered once the web page is fully loaded. This event moves the <div> element to the top-left corner.
Further, we attach the keyup event listener to the window. It will be triggered whenever the arrow key is pressed from anywhere in the window.
Finally, we convert into the number using parseInt() function and add/subtract 5px to move the element. Suppose we have to move another element that is not a mathematical shape.
Use Arrow Keys to Move Element Position Using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Move Element</title>
</head>
<body>
<h1 class="hOne">Heading One</h1>
</body>
</html>
h1{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 40px;
border: 5px solid #BADA55;
color: #A28;
margin: 0;
text-align: center;
}
$(document).keydown(function(e) {
switch (e.which) {
case 37: // left arrow key
$('.hOne').finish().animate({left: '-=30'});
break;
case 38: // up arrow key
$('.hOne').finish().animate({top: '-=30'});
break;
case 39: // right arrow key
$('.hOne').finish().animate({left: '+=30'});
break;
case 40: // bottom arrow key
$('.hOne').finish().animate({top: '+=30'});
break;
}
});
OUTPUT:
We move the <h1> element using the keyboard’s arrow keys in this example. The element is moved by 30px whenever the arrow key is pressed in the document.
The jQuery’s keydown() method triggers an event on an HTML element or binds the event handler to a keydown JavaScript event.
The event.which is used for mouse or key events and indicates a particular key/button that was pressed in this case. We are using it for arrow keys.
The finish() function terminates all the animations which are currently running. It removes the queued animations and completes the matched tags/elements.
On the other hand, the animate() method moves the element from one position to another with CSS Cascading Style Sheet style. You can find more here about this method.
