JavaScript move div with the mouse

Last Updated : |  

To move an HTML element with the mouse, most fail to determine the correct position and have a small jerk in it, because the wrong difference was determined. This happens when the calculation is wrong, because it matters what you want to do exactly. If you want to move a div in a div it is important to set the events and which element you want to move.


For too fast movements, this example will not work. Since neither the GPU processor is used here, nor a warning is installed.

In most of the tutorials you'll find that right in the body an element is created and inserted and it is moved, even with these jerks in it. The wrong calculation passes the mouse position to the div and overwrites the old position of the div so that div does not start from the old position.

Limit when moving

We set here two HTML elements to immediately include a limit, that is, we can not push outside the wrapper. But not only HTML but we need CSS.

     0  <div class="wrapper">  1      <div class="move"></div>  2  </div> 

    Make element visible and narrow

    Then the CSS, but kept very simple and only with what we need. The wrapper we give an overflow hidden (so that what is outside is not visible) and 100% width, so we adapt ourselves to the parent box. The element we want to move we give a size and position with absolute.

    // CSS CODE
       0  // That's our limiter, you can adjust the height  1  .wrapper {  2      overflow: hidden;  3      display: block;  4      width: 100%;  5  }  6    7  // To move our element  8  .move {  9      position: absolute;  10      width: 150px;  11      height: 150px;  12      left: 0;  13      top: 0;  14      background-color: #333;  15  } 

      Determine coordinates to move

      So then the Javascript yet. We set the event on the div to determine the first position of the mouse pointer when the mouse button (mousedown) is pressed and hold it, as well as the div coordinates.

      We do this because we only want to allow the div to trigger the push. If we have them, we can get the difference and set the status to true. Releasing the mouse button (mouseup) sets the status back to false. We need these two states so that the div does not follow the whole time of the mouse, but only while holding down the mouse button.

      At the end, we put our event on the wrapper and first check if the mouse button is held down. If this is the case then we allow the move and calculate the coordinates up to our difference. So we always have the exact position no matter where we tackle the div.

      // JS CODE
         0  var elem = document.querySelector('.wrapper'),  1          div = document.querySelector('.move'),  2          x = 0,  3          y = 0,  4          mousedown = false;  5    6  // div event mousedown  7  div.addEventListener('mousedown', function (e) {  8      // mouse state set to true  9      mousedown = true;  10      // subtract offset  11      x = div.offsetLeft - e.clientX;  12      y = div.offsetTop - e.clientY;  13  }, true);  14    15  // div event mouseup  16  div.addEventListener('mouseup', function (e) {  17      // mouse state set to false  18      mousedown = false;  19  }, true);  20    21  // element mousemove to stop  22  elem.addEventListener('mousemove', function (e) {  23      // Is mouse pressed  24      if (mousedown) {  25          // Now we calculate the difference upwards  26 = e.clientX + x + 'px';  27 = e.clientY + y + 'px';  28      }  29  }, true); 

        You can also use transform translate or translate3d to do the whole thing instead of left and top. Or even if you move the mouse beyond the desired surface, you can also set the mousdown back to false so that you have to grab again. Because if you now drive over the area then he will dock again as soon as you drive back in. Here you can download the whole example.

         JS element move


        Your Comment

        * This fields are required, email don't publish

        This field is optional
        Fill this field link your name to your website.

        Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

        I have read the Privacy policy and Terms. I Confirm the submission of the form and the submission of my data.
        tnado © 2022 | All Rights Reserved
        In cooperation with Hyperly