Can't move the box when dragging?

July 4, 2022

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?

>Solution :

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>