Как перетащить дочерний div только внутри родительского div - PullRequest
Новая
       141

Как перетащить дочерний div только внутри родительского div

0 голосов
/ 09 мая 2020

Я перетаскиваю div, который должен двигаться только внутри родителя div ...
Когда перетаскивание div выходит из родительского div, как заставить div двигаться только внутри родительского div?

div дочерний должен быть интерактивным, поэтому не помещайте CSS pointer-events: none;!

Код: 

document.getElementById("parent").addEventListener('mouseup', mouseUpElement, false);
var modalwindoweditdefaultelement = document.getElementById("child");
var elementdragTop;
var elementdragLeft;

function mouseDownElement(e) {
  document.getElementById("parent").addEventListener("mousemove", myFunctionDragElement, true);
  elementdragTop = event.clientX - document.getElementById("child").offsetLeft;
  elementdragLeft = event.clientY - document.getElementById("child").offsetTop;
}

function mouseUpElement() {
  document.getElementById("parent").removeEventListener("mousemove", myFunctionDragElement, true);
}

function myFunctionDragElement(e) {
  var x = event.clientX;;
  var y = event.clientY;
  document.getElementById("child").style.position = "absolute";
  document.getElementById("child").style.left = x - elementdragTop + 'px';
  document.getElementById("child").style.top = y - elementdragLeft + 'px';
}
#parent {
  width: 500px;
  height: 500px;
  background-color: blue;
  position: absolute;
  margin: 100px;
}

#child {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  margin: 0px;
}
<div id="parent">
  <div id="child" onmousedown="mouseDownElement()"></div>
</div>
...