使用 transform translate、mousemove 和 pageX (pageY) 约束块位移

Posted 2023-03-04

【中文标题】使用 transform translate、mousemove 和 pageX (pageY) 约束块位移

【英文标题】：Constraining block displacement using transform translate, mousemove and pageX (pageY)

【发布时间】：2022-01-23 06:23:31

【问题描述】：

我正在使用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.pageXpx`;
    

point.addEventListener('mousedown', (event) => 
    window.start_x = second_block.clientWidth - event.pageX;
    document.addEventListener('mousemove', change_second_block);
);

【参考方案1】：

您可以只测试新宽度，如果它太大，则将其限制为不超过最大值。

这个 sn-p 对 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.pageXpx` : '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>

【讨论】：

我考虑过这个选项，但没有更正确的选项，使其完全不超出界限吗？是否可以在css中制作一些边框？也许添加一个块？

第二个块永远不会超出边界，它的宽度永远不会超过 500px。您是说您希望鼠标被限制为永远不会超出边界吗？这将减少功能 - 用户永远无法逃离该元素。

不，我想说区块没有机会超越极限。有限制，我明白 - 谢谢。但我想有一个解决方案，让街区没有机会超越

块绝对不能超越。

【参考方案2】：

如果项目中的更改大小超过某个限制，或者通过检查限制并停止更新，您可以解决此问题。我通过如下更新代码来防止鼠标快速移动导致的溢出：

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.pageXpx`;
        
    

参考文献

javascript mouse event not captured properly when mouse moved very fast

【讨论】：

我考虑过这个选项，但没有更正确的选项，使其完全不超出界限吗？是否可以在css中制作一些边框？也许添加一个块？

您是否考虑过使用jQuery resizable 来完成这项工作？您将获得更快、更可靠的结果。

要查看类似问题的解决方案，您应该查看this post。

如果可能的话，我想不使用 jQuery