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

Здравствуйте. Сделал перетаскивание элемента, но он почему-то перетаскивается за пределы родительского, хотя по логике не должен, т.к 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;
};