Languages
[Edit]
EN

JavaScript - drag and drop div

5 points
Created by:
Root-ssh
175020

Using JavaScript it is possible to make drag&drop div element in following way.

1. Custiom solution example

Note: big advantage of presented approach in this section is resistance for changed margin, border and padding sizes (with nested elements too).

More complicated example with handle element is here.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    div.draggable {
        padding: 10px;
        position: absolute;
        left: 20px; right: 20px;
        background: gray;
        width: 150px; height: 150px;
    }

    * {  /* this style disables selection for all elements on web page      */
        -webkit-touch-callout: none;  /* iOS Safari                         */
          -webkit-user-select: none;  /* Safari                             */
           -khtml-user-select: none;  /* Konqueror HTML                     */
             -moz-user-select: none;  /* Firefox in the past (old versions) */
              -ms-user-select: none;  /* Internet Explorer (>=10) / Edge    */
                  user-select: none;  /* Currently supported:               */
                                      /* Chrome, Opera and Firefox          */
    }

  </style>
  <script type="text/javascript">

    function getMargins(element) {
		var style = element.currentStyle || window.getComputedStyle(element);
        var result = {
            getX: function() {
                return parseInt(style.marginLeft);
            },
            getY: function() {
                return parseInt(style.marginTop);
            }
        };
        return result;
    }

    function prepareDragging(element) {
        var removed = false;
        var dragging = false;
        var style = element.style;
        var clickX, clickY, positionX, positionY;
        var onMouseDown = function(e) {
            clickX = e.clientX;
            clickY = e.clientY;
            var margins = getMargins(element);
          	// this approach prevents against different margin sizes
            positionX = element.offsetLeft - margins.getX();
            positionY = element.offsetTop - margins.getY();
            dragging = true;
        };
        var onMouseUp = function(e) {
            dragging = false;
        };
        var onMouseMove = function(e) {
            if (dragging) {
                var x = positionX + e.clientX - clickX;
                var y = positionY + e.clientY - clickY;
                style.left = x + 'px';
                style.top = y + 'px';
            }
        };
        element.addEventListener('mousedown', onMouseDown);  
        window.addEventListener('mouseup', onMouseUp);  
        window.addEventListener('mousemove', onMouseMove);
        return function() {
            if (removed) {
                return;
            }
            element.removeEventListener('mousedown', onMouseDown);  
            window.removeEventListener('mouseup', onMouseUp); 
            window.removeEventListener('mousemove', onMouseMove);
            removed = true;
        };
    }

  </script>
</head>
<body style="height: 200px;">
  <div id="my-element" class="draggable">
     Something inside...
  </div>
  <script>

      var element = document.querySelector('#my-element');

      prepareDragging(element);

  </script>
</body>
</html>

 

See also

  1. HTML - how to disable text selection?
  2. JavaScript - how to make drag and drop div with handle?

  3. JavaScript - how to make drag and drop div with handle inside another element?

Alternative titles

  1. JavaScript - how to make drag & drop div?
  2. JavaScript - how to make drag and drop div?
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join