Ограничение смещения блока, используя transform translate, mousemove и pageX (pageY)

Question

Я изменяю размеры и положения блока используя событие 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/

Answer 1

Можно сделать так..

"use strict";
let second_block = document.getElementById('second_block');
let point = document.getElementById('point');
let first_block = document.getElementById('first_block');
let mouseDown = false;

function change_second_block() {
  if(mouseDown && event.pageX < first_block.clientWidth){
    second_block.style.width = event.pageX + 'px';
  }
  if(mouseDown && event.pageX > first_block.clientWidth){
    second_block.style.width = first_block.clientWidth + 'px';
  }
}
document.addEventListener('mousemove', change_second_block);
point.onmousedown = function(event) { mouseDown = true; }
document.onmouseup = function(event) { mouseDown = false; }

* {
    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>

БЛОГ НА HUSL

Ограничение смещения блока, используя transform translate, mousemove и pageX (pageY)

Ответы (1 шт):