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.

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.


// HTML CODE
     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      // maus state auf true setzen  9      mousedown = true;  10      // offset abziehen  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      // maus state auf false setzen  18      mousedown = false;  19  }, true);  20    21  // element mousemove um zu stoppen  22  elem.addEventListener('mousemove', function (e) {  23      // Ist maus gedruekt  24      if (mousedown) {  25          // jetzt rechnen wir die differenz rauf  26          div.style.left = e.clientX + x + 'px';  27          div.style.top = 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
        You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
        ?

        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 © 2019 | All Rights Reserved
        In cooperation with Hyperly