Здравствуйте. Сделал перетаскивание элемента, но он почему-то перетаскивается за пределы родительского, хотя по логике не должен, т.к onmousemove указан на родительский элемент. Подскажите кто-нибудь, как можно решить эту проблему?
<!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>
</head>
CSS: .first {
width:1000px;
height:600px;
background-color:red;
}
#one {
width:200px;
height:200px;
background-color:black;
position:absolute;
}
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;
};