Constraining block displacement using transform translate, mousemove and pageX (pageY)

Question

I am resizing and positioning a box using the mousemove event. Those. i change transform translate and width (height) with pageX (pageY). But due to the fact that the mouse event mousemove does not always have time to be processed (for example, if you move the mouse quickly) or does not have time to read conditions, the block goes out of bounds. Question: what do I need to do in this case so that the block does not go beyond the boundaries?

This is how it looks roughly. Those. in this example, the second_block is outside the first_block (500px), i.e. it does not have time to read the condition. How should this issue be resolved? Also for convenience 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);
});

score 0 · Answer 1 · answered Dec 21 '21 at 22:24

You could just test the new width and if it's too large then constrain it to be no more than the maximum.

This snippet does this for the x direction and forces it to remain at or below 500px.

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

I considered this option, but isn't there a more correct option so that it does not go beyond the boundaries at all? Is it possible to make some borders in css? Maybe add a block? — Manu, Dec 22 '21 at 00:21
The second block never goes beyond the boundaries, it never gets a width greater than 500px. Are you saying you want the mouse to be constrained to never go beyond the boundaries? That would cut down the functionality - the user could never escape from that element. — A Haworth, Dec 22 '21 at 09:02
No, I want to say that the block did not have the opportunity to go beyond the limits. With a limitation, I understood - thank you. But I would like to have a solution so that the block does not have the opportunity to go beyond — Manu, Dec 22 '21 at 12:25

Sercan · Answer 2 · 2021-12-23T05:52:44.883

0

You can work around this issue if the size of the change in the item is above a certain limit, or by checking the limit and stopping the update. I prevented the overflow caused by rapid mouse movement by updating its code as follows:

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`;
        }
    }
}

References

Javascript mouse event not captured properly when mouse moved very fast

edited Dec 23 '21 at 05:52

answered Dec 21 '21 at 22:26

Sercan

4,739
3
17
36

I considered this option, but isn't there a more correct option so that it does not go beyond the boundaries at all? Is it possible to make some borders in css? Maybe add a block? – Manu Dec 22 '21 at 00:20
Have you considered using [jQuery resizable](https://jqueryui.com/resizable/) for this job? You will get faster and more reliable results. – Sercan Dec 22 '21 at 00:26
To review the solution for a similar issue, you should check out [this post](https://stackoverflow.com/a/70424640/15032688). – Sercan Dec 22 '21 at 00:29
I would like to do without jQuery if possible – Manu Dec 22 '21 at 12:33

Constraining block displacement using transform translate, mousemove and pageX (pageY)

2 Answers2

References