Хочу сделать передвигающейся элемент(белый круг) внутри круга(красный круг) как показано ниже. Но, если передвигать элемент ближе к углам круга, то элемент выходить за границу круга.
Как сделать ограничение элементу, чтобы он не выходил за пределы внешнего круга?
P.S. Попробовал применить единичную окружность, находил расстояние от центра внешнего круга, до текущего местоположения элемента, и если это расстояние больше 1, то не менял позицию элемента, но это приводит к блокировке элемента(больше не двигается).
const
stick = document.querySelector("#stick"),
stickWidth = stick.clientWidth,
stickHeight = stick.clientHeight,
stickArea = stick.parentNode,
stickAreaWidth = stickArea.clientWidth,
stickAreaHeight = stickArea.clientHeight
stick.style.left = (stickAreaWidth - stickWidth) / 2 + 'px'
stick.style.top = (stickAreaHeight - stickHeight) / 2 + 'px'
stick.onmousedown = function(event) {
event.preventDefault();
let shiftX = event.clientX - stick.getBoundingClientRect().left;
let shiftY = event.clientY - stick.getBoundingClientRect().top;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
function onMouseMove(event) {
let
newLeft = event.clientX - shiftX - stickArea.getBoundingClientRect().left,
newTop = event.clientY - shiftY - stickArea.getBoundingClientRect().top,
rightEdge = stickAreaWidth - stickWidth,
topEdge = stickAreaHeight - stickHeight,
dataStick = getDataStick(stick);
if (newLeft < 0) newLeft = 0;
if (newTop < 0) newTop = 0;
if (newLeft > rightEdge) newLeft = rightEdge;
if (newTop > topEdge) newTop = topEdge;
// if (dataStick.distance > 1) {
// return
// }
stick.style.left = newLeft + 'px';
stick.style.top = newTop + 'px';
}
function onMouseUp() {
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
}
};
stick.ondragstart = function() {
return false;
};
function getDataStick(stick) {
const
parentPos = stick.parentNode.getBoundingClientRect(),
stickPos = stick.getBoundingClientRect(),
x = (parentPos.left - stickPos.left) / (stick.parentNode.clientWidth - stick.clientWidth) * (-2) - 1,
y = (parentPos.top - stickPos.top) / (stick.parentNode.clientHeight - stick.clientHeight) * 2 + 1,
data = {}
data.x = x
data.y = y
data.distance = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))).toFixed()
return data
}
body {
width: 100vw;
height: 100vh;
font-size: 16px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #212529;
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}
.wrapper {
width: 90vw;
height: 90vw;
max-width: 300px;
max-height: 300px;
position: relative;
display: flex;
justify-content: space-around;
background: brown;
border-radius: 50%;
}
#stick {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
background-color: white;
cursor: pointer;
}
<div class="container">
<div class="wrapper">
<div id="stick"></div>
</div>
</div>