Menu
Practicing some front end stuff just by using addEventListener. What I am trying to achieve here is that : click the square and then hold the mouse while moving the square to another place on the page and stop moving by release the mouse. Something is not right as the square seems to move in one direction only. Need some help here.
#square_cursor {
position: relative;
left: 109px;
top: 109px;
height: 50px;
width: 50px;
background-color: rgb(219, 136, 136);
border: 5px rgb(136, 219, 219) solid;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id='square_cursor'></div>
<script>
let mouse_over_detector = false; //move the mouse over WITHOUT clicking
let mouse_click_detector = false; //clicking the mouse WITHOUT moveover
let drag_detector = false; //move and holding the mouse together
let window_click_detector = false;
let window_motion_detector = false;
let position_x = 0;
let position_y = 0;
let new_position_x = 0;
let new_position_y = 0;
window.addEventListener('mousedown', () => {
window_click_detector = true;
})
window.addEventListener('mouseup', () => {
window_click_detector = false;
brick.style.backgroundColor = 'rgb(219, 136, 136)';
})
let brick = document.getElementById('square_cursor');
//done
brick.addEventListener('mousedown', (event) => {
position_x = event.clientX;
position_y = event.clientY;
mouse_click_detector = true;
brick.style.backgroundColor = 'yellow';
})
brick.addEventListener('mousemove', (event) => {
if (mouse_click_detector === true) {
new_position_x = event.clientX;
new_position_y = event.clientY;
dragAndDrop(position_x, position_y, event.offsetX, event.offsetY);
}
});
brick.addEventListener('mouseout', () => {
mouse_over_detector = false;
mouse_click_detector = false;
})
brick.addEventListener('mouseup', () => {
mouse_click_detector = false;
})
function dragAndDrop(a, b, c, d) {
console.log('new x: ')
console.log(a - c);
console.log('new y: ')
console.log(b - d);
brick.style.left = a - c + 'px'
brick.style.top = b - d + 'px';
}
</script>
</body>
</html>
824
asked Oct 24 '25 09:10
SOLVED IT THIS MORNING by using just addEventListener wooohoooo!
So the keys here are, first, being able to identify the DOM hierarchy and second, knowing what clientX does for the selected element. I am going to post my solution in snippet mode.
But I am still gonna give a vote to the 1st answer.
#square_cursor{
position:absolute;
left:109px;
top:109px;
height:50px;
width:50px;
background-color: rgb(219, 136, 136);
border:5px rgb(136, 219, 219) solid;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id='square_cursor'></div>
<script>
let mouse_click_detector = false; //clicking the mouse WITHOUT moveover
let window_click_detector = false;
let position_x = 0;
let position_y = 0;
let click_position_x = 0;
let click_position_y = 0;
let brick = document.getElementById('square_cursor');
brick.addEventListener('mousedown', () => {
mouse_click_detector = true
})
window.addEventListener('mouseup', () => {
mouse_click_detector = false;
window_click_detector = false;
brick.style.backgroundColor = 'rgb(219, 136, 136)';
})
window.addEventListener('mousedown', (event) => {
if (mouse_click_detector === true) {
window_click_detector = true;
brick.style.backgroundColor = 'yellow';
click_position_x = event.offsetX;
click_position_y = event.offsetY;
}
})
window.addEventListener('mousemove', (event) => {
if (mouse_click_detector === true) {
position_x = event.clientX;
position_y = event.clientY;
brick.style.left = position_x - click_position_x + 'px';
brick.style.top = position_y - click_position_y + 'px';
}
})
</script>
</body>
</html>"The most personal is the most creative" --- Martin Scorsese
135
answered Oct 25 '25 23:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With