Я изменяю размеры и положения блока используя событие mousemove
. Т.е. я изменяю transform translate
и width (height)
с помощью pageX (pageY)
. Но из-за того, что событие мыши mousemove
не успевает всегда отрабатывать (например, если быстро перемещать мышь) или не успевает считывать условия, блок выходит за границы.
Вопрос: что мне в этом случае нужно сделать, чтобы блок не выходил за границы?
Вот как примерно это выглядит:
"use strict";
let second_block = document.getElementById('second_block');
let point = document.getElementById('point');
function change_second_block() {
if (second_block.clientWidth < 500) {
second_block.style.width = `${start_x + event.pageX}px`;
}
}
point.addEventListener('mousedown', (event) => {
window.start_x = second_block.clientWidth - event.pageX;
document.addEventListener('mousemove', change_second_block);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: flex;
flex-direction: column;
}
div.first_block {
height: 300px;
width: 500px;
background: green;
}
div#auxiliary_block {
position: absolute;
}
div.second_block {
height: 200px;
width: 300px;
background: orange;
}
input.point {
position: absolute;
cursor: pointer;
height: 14px;
width: 14px;
border: none;
background: black;
right: -7px;
top: 50%;
}
<div id="first_block" class="first_block">
<div id="auxiliary_block">
<div id="second_block" class="second_block"></div>
<input id="point" class="point" name="name_point" type="button">
</div>
</div>
<script src="1.block_in_center_question.js"></script>
Т.е. в этом примере блок .second_block
выходит за границы first_block
(500px), т.е. условие он не успевает считывать. С помощью чего нужно решить данный вопрос?
Также для удобства https://jsfiddle.net/ManuOP/t1r4szdx/3/