I am trying to drag a box with my mouse. When the mouse clicks down and moves, the box will move with the mouse. When the mouse bounces up, it stops moving. Here is how I do it.
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector('div')
div.addEventListener('mousedown', function(e){
x = e.pageX - div.offsetLeft;
y = e.pageY - div.offsetTop;
div.addEventListener('mousemove', move) // when mouse move, change the position of div
function move(e) {
div.style.left = e.pageX-x + 'px'; // not working
div.style.top = e.pageY-y + 'px'; // not working
}
div.addEventListener('mouseup', function(e){
div.removeEventListener('mousemove', move)
})
})
</script>
</body>
</html>
I can get the new position(left and right) of the box by e.pageX-x + 'px'. But div.style.left = e.pageX-x + 'px' seems not working. Someone knows what is the problem?
You need to add the position: absolute; style to the div element that you are trying to drag/drop.
Have a look:
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
position: absolute;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector('div')
div.addEventListener('mousedown', function(e){
x = e.pageX - div.offsetLeft;
y = e.pageY - div.offsetTop;
div.addEventListener('mousemove', move) // when mouse move, change the position of div
function move(e) {
div.style.left = e.pageX-x + 'px'; // not working
div.style.top = e.pageY-y + 'px'; // not working
}
div.addEventListener('mouseup', function(e){
div.removeEventListener('mousemove', move)
})
})
</script>
</body>
</html>