Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ā¤ šŸ’»

If you think sharing knowledge and helping other is valuable.

join our community - Click here

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

0 contributions
9 points

Using JavaScript it is possible to make drag&drop div element with handle, inside another draggable 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).

// ONLINE-RUNNER:browser;

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

    div.draggable {
        position: absolute;
        left: 20px; right: 20px;
      	border: 5px solid gray;
        overflow: hidden;
    }
    
    div.handle {
      	padding: 3px;
      	position: absolute;
      	left: 0; top: 0; right: 0;
    	background: gold;
      	height: 25px;
    }
    
    div.body {
    	padding: 3px;
      	position: absolute;
      	left: 0; top: 25px; right: 0; bottom: 0;
    	background: cyan;
    }

    * { /* 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, handle) {
        var dragging = false;

        var clickX, clickY;
        var positionX, positionY;

        var style = element.style;

        function onMouseDown(e) {
            clickX = e.clientX;
            clickY = e.clientY;

            var margins = getMargins(element);

          	// this approach prevents agains different margin sizes
            positionX = element.offsetLeft - margins.getX();
            positionY = element.offsetTop - margins.getY();

            dragging = true;
        }

        function onMouseUp(e) {
            dragging = false;
        }
      
        function onMouseMove(e) {
            if (dragging) {
                var x = positionX + e.clientX - clickX;
                var y = positionY + e.clientY - clickY;
                
                style.left = x + 'px';
                style.top = y + 'px';
            }
        }

        handle.addEventListener('mousedown', onMouseDown);  
        window.addEventListener('mouseup', onMouseUp);  
        window.addEventListener('mousemove', onMouseMove);
        
        var remove = function() {
            if (remove) {
                handle.removeEventListener('mousedown', onMouseDown);  
                window.removeEventListener('mouseup', onMouseUp); 
                window.removeEventListener('mousemove', onMouseMove);

                remove = null;
            }
        };
      
        return remove;
    }

  </script>
</head>
<body style="height: 300px;">
  
  <div id="my-element-1" class="draggable" style="width: 200px; height: 200px;">
    <div id="my-handle-1" class="handle">Drag me...</div>
    <div class="body">
      <p>Something inside...</p>
      
      <div id="my-element-2" class="draggable" style="width: 100px; height: 100px;">
        <div id="my-handle-2" class="handle">Drag me...</div>
        <div class="body">Something inside...</div>
      </div>
      
    </div>
  </div>
  
  <script>

      var element1 = document.querySelector('#my-element-1');
      var handle1 = document.querySelector('#my-handle-1');

      prepareDragging(element1, handle1);
    
      var element2 = document.querySelector('#my-element-2');
      var handle2 = document.querySelector('#my-handle-2');

      prepareDragging(element2, handle2);

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

Ā 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey šŸ‘‹
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more