Как сделать перемещение div с зажатой кнопкой мыши в js? Желательно с объяснением. Мне нужно что-бы этот круг двигался свободно

Question

body{
    background-color: #333;
}

.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}


.circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<!DOCTYPE HTML>
<html lang="ru"><head>
<title>Redactor marshrutov</title>
<meta charset="utf-8">
<script type="text/javascript" src="menu1.js"></script>
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>

<body>

<section class="section">

<div class="container">
    <div class="circle">
        
    </div>
</div>

</section>


</body>






</html>

Answer 1

Если с объяснениями, то Drag'n'Drop с событиями мыши надеюсь поможет.

Answer 2

let currentDroppable = null;
    
        circle.onmousedown = function(event) {
    
          let shiftX = event.clientX - circle.getBoundingClientRect().left;
          let shiftY = event.clientY - circle.getBoundingClientRect().top;
    
          circle.style.position = 'absolute';
          circle.style.zIndex = 1000;
          document.body.append(circle);
    
          moveAt(event.pageX, event.pageY);
    
          function moveAt(pageX, pageY) {
            circle.style.left = pageX - shiftX + 'px';
            circle.style.top = pageY - shiftY + 'px';
          }
    
          function onMouseMove(event) {
            moveAt(event.pageX, event.pageY);
    
            circle.hidden = true;
            let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
            circle.hidden = false;
    
            if (!elemBelow) return;
    
            let droppableBelow = elemBelow.closest('.droppable');
            if (currentDroppable != droppableBelow) {
              if (currentDroppable) { // null when we were not over a droppable before this event
                leaveDroppable(currentDroppable);
              }
              currentDroppable = droppableBelow;
              if (currentDroppable) { // null if we're not coming over a droppable now
                // (maybe just left the droppable)
                enterDroppable(currentDroppable);
              }
            }
          }
    
          document.addEventListener('mousemove', onMouseMove);
    
          circle.onmouseup = function() {
            document.removeEventListener('mousemove', onMouseMove);
            circle.onmouseup = null;
          };
    
        };
    
        function enterDroppable(elem) {
          elem.style.background = 'pink';
        }
    
        function leaveDroppable(elem) {
          elem.style.background = '';
        }
    
        circle.ondragstart = function() {
          return false;
        };

body{
    background-color: #333;
}

.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}


.circle {
    position: absolute;
    z-index: 9;
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

<!DOCTYPE HTML>
<html lang="ru"><head>
<title>Redactor marshrutov</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="menu1.css">
</head>



<body>

<section class="section">

<div class="container">
    
    
    <div class="circle" id="circle">
          
    </div>


</div>

</section>


<script type="text/javascript" src="menu1.js"></script>
</body>






</html>

все работает спасибо Makar X за помощь.

Answer 3

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                background-color: green;
                height: 50px;
                width: 50px;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    
    <body>
        <div id="square"></div>
        <script>
            let dragMode = false;
            square.addEventListener('mousedown', function (e) {
                dragMode = true;
            });
            square.addEventListener('mouseup', function (e) {
                dragMode = false;
            });
    
    
    
    
            document.addEventListener('mousemove', function (e) {
                if (dragMode) {
                    square.style.left = e.clientX - 25 + 'px';
                    square.style.top = e.clientY - 25 + 'px';
                }
            });
        </script>
    </body>
    
    </html>

БЛОГ НА HUSL

Как сделать перемещение div с зажатой кнопкой мыши в js? Желательно с объяснением. Мне нужно что-бы этот круг двигался свободно

Ответы (3 шт):