使用變換平移、滑鼠移動和pageX(pageY)約束塊位移-有解無憂

我正在使用mousemove事件調整大小和定位一個框。那些。我改變transform translate并width (height)用pageX (pageY)。但是由于滑鼠事件mousemove并不總是有時間來處理（例如，如果您快速移動滑鼠）或沒有時間讀取條件，塊就會越界。問題：在這種情況下我需要做什么才能使塊不超出邊界？

這是它的大致樣子。那些。在這個例子中，second_block是在first_block(500px) 之外，即它沒有時間讀取條件。這個問題應該如何解決？也為了方便https://jsfiddle.net/ManuOP/t1r4szdx/3/

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

* {
    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%;
}

"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);
});

uj5u.com熱心網友回復：

您可以只測驗新寬度，如果它太大，則將其限制為不超過最大值。

此代碼段針對 x 方向執行此操作，并強制其保持在 500 像素或以下。

"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) < 500 ? `${start_x   event.pageX}px` : '500px';
  }
}
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>

uj5u.com熱心網友回復：

如果專案中的更改大小超過某個限制，您可以解決此問題，或者通過檢查限制并停止更新來解決此問題。我通過如下更新其代碼來防止由滑鼠快速移動引起的溢位：

function change_second_block()
{
    console.log("Event.PageX: "   event.pageX);

    if(event.pageX < 500 )
    {
        if(second_block.clientWidth < 500)
        {
            second_block.style.width = `${start_x   event.pageX}px`;
        }
    }
}

使用變換平移、滑鼠移動和pageX(pageY)約束塊位移

相關資源