Перетаскивание элемента в пределах родительского

Question

Сделал перетаскивание картинки, но она почему-то перетаскивается за пределы родительского, хотя по логике не должен, т.к. onmousemove указан на родительский элемент:

let a = document.querySelector(".first");
let b = document.querySelector("#one");
let c = document.querySelector(".first2");
b.onmousedown = move;

function move(r) {
  console.log("нажатие");
  b.style.left = r.pageX - b.offsetWidth / 2 + "px";
  b.style.top = r.pageY - b.offsetHeight / 2 + "px";
  a.onmousemove = function(e) {
    c.innerHTML = e.pageX + " " + e.pageY;
    b.style.left = e.pageX - b.offsetWidth / 2 + "px";
    b.style.top = e.pageY - b.offsetHeight / 2 + "px";
  }
  b.onmouseup = move2;
}

function move2() {
  console.log("отпускание");
  a.onmousemove = null;
  b.onmouseup = null;
}

b.ondragstart = function() {
  return false;
};

.first {
  width: 1000px;
  height: 600px;
  background-color: red;
}

#one {
  width: 200px;
  height: 200px;
  background-color: black;
  position: absolute;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style17.css">
  <title>Перетаскивание мышью</title>
</head>

<body>
  <div class="first2"></div>
  <div class="first"><img src="image.jpg" width="200" height="200" id="one"></div>
  <br>
  <script src="script17.js"></script>
</body>

</html>

Подскажите, как можно решить эту проблему?

БЛОГ НА HUSL

Перетаскивание элемента в пределах родительского

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