let qu = document.getElementById('d2')
let div0 = document.getElementById('d1') //Обьявил для возможного использования
qu.onmousedown = function(e) {
qu.style.position = 'absolute';
moveAt(e);
qu.style.zIndex = 1000;
function moveAt(e) {
qu.style.left = e.pageX - qu.offsetWidth / 2 + 'px';
}
document.onmousemove = function(e) {
moveAt(e);
}
qu.onmouseup = function() {
document.onmousemove = null;
qu.onmouseup = null;
}
}
.d1 {
width: 500px;
height: 40px;
background: black;
}
.d2 {
height: 40px;
width: 20px;
background-color: rgb(72, 0, 50);
}
<div id="d1" class="d1">
<div id="d2" class="d2">
</div>
</div>
Как мне ограничить зону передвижения div2. Использовать костыли ограничивая body я не хочу. Адекватно составить условие тоже не получилось. Буду благодарен за любые советы)