я создал Drag and Drop но не могу понять что не работает, консоль ошибок не выдаёт, уже 2 часа пытаюсь что-то сделать, Но нет
// находим наши объекты
var krug = document.querySelector('.krug');
var gran = document.querySelector('.gran');
var drag = false;
// дальше мы делаем лимиты(границы) передвижения круга
var limit = {
top: gran.offsetTop, // для: верха
right: gran.offsetWidth + gran.offsetLeft - krug.offsetWidth, // права
bottom: gran.offsetHeight + gran.offsetTop - krug.offsetHeight, // низа
left: gran.offsetLeft, // лева
};
// потом делаем включение или выключение drag
krug.onmousedown = function (e) {
drag = true;
};
document.onmouseup = function () {
drag = false;
};
document.onmousemove = function (e) {
if (drag) {
move(e);
}
};
// дальше вычисляем координаты для круга
function move(e) {
var NewLoc = {
x: limit.left,
y: limit.top,
};
if (e.pageX > limit.right) {
NewLoc.x = limit.right;
} else if (e.pageX > limit.left) {
NewLoc.x = e.pageX;
}
if (e.pageY > limit.bottom) {
NewLoc.y = limit.bottom;
} else if (e.pageY > limit.top) {
NewLoc.y = e.pageY;
}
ReLoc(NewLoc);
}
function ReLoc(NewLoc) {
krug.style.top = NewLoc.y + 'px';
krug.style.left = NewLoc.x + 'px';
}
body {
background: gray;
}
.gran {
position: absolute;
background: rgb(74, 255, 74);
width: 300px;
height: 300px;
top: 25%;
left: 35%;
border: 4px solid darkgreen;
}
.krug {
background: yellow;
border: 4px solid gray;
width: 100px;
height: 100px;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* дальше я иду в script.js */
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Перемещение</title>
</head>
<body>
<!-- для начала я создам наши границы -->
<div class="gran">
<!-- в нём я создам ещё объект(круг) -->
<div class="krug">
<!-- дальше продолжу в style.css -->
</div>
</div>
<script>
</script>
</body>
</html>