Как ограничить область перемещения элемента при событии mousemove?

Question

[Илья Волков]

Есть блок, внутри которого расположен элемент, который можно перемещать с помощью события mousemove. Как сделать так, чтобы я не мог перемещать его за пределы красных линий по оси Y и за пределы блока по оси X?

Answer 1

[Антон Усачев]

Позицию объекта мы знаем. Нужно вычислить позицию линий.
Проверять позицию верха и низа объекта относительно позиции линий.
Если верх объекта больше или равен позиции верхней линии, задаем объекту жестко позицию сверху равную позиции верхней линии.
Если низ объекта больше или равен позиции нижний линии, задаем объекту жестко позицию сверху равную позиции нижний линии минус высота объекта.
Слева и справа те же действия, только по оси x.

Кусочек кода для первого условия:

if (element.offsetTop - offset.y + 'px' <= позицияВерхнейЛинии + 'px') {
    element.style.top = позицияВерхнейЛинии + 'px'
}

Comments

[Илья Волков]

С помощью вашего ответа дошёл до такого решения:

if (element.offsetTop - offset.y + 'px' >= позицияВерхнейЛинии + 'px' && element.offsetTop - offset.y <= позицияНижнейЛинии + 'px') {
    element.style.top = element.offsetTop - offset.y + 'px';
}

Далее еще одно условие для оси X.
То есть элемент перемещается только если mousemove происходит внутри линий, что скажете о таком варианте?

Answer 2

[dollar]

Нужно посчитать границы области, где можно перемещаться. Это будут минимумы и максимумы координат. Ну и размеры элемента тоже понадобятся.

Далее в коде в том месте, где вы меняете координаты, делать соответствующий сравнения. Типа такого:

if (x > max_x - obj_width) x = max_x - obj_width;
if (x < min_x) x = min_x;

Comments

[Илья Волков]

С помощью вашего ответа дошёл до такого решения:

if (element.offsetTop - offset.y + 'px' >= позицияВерхнейЛинии + 'px' && element.offsetTop - offset.y <= позицияНижнейЛинии + 'px') {
    element.style.top = element.offsetTop - offset.y + 'px';
}

Далее еще одно условие для оси X.
То есть элемент перемещается только если mousemove происходит внутри линий, что скажете о таком варианте?

[dollar]

Илья Волков, я имел в виду немного другой подход.

Пересчет координат происходит всегда. Но перед тем, как применить их к элементу, происходит проверка на выход за границы. По идее это позволит двигать по оси Y, если мышь вышла за границы по X, и наоборот.

В качестве оптимизации можно кешировать координаты где-то в переменных. И если они не поменялись, то не применять к элементу.

[Илья Волков]

dollar, моё решение тоже подразумевает движение элемента по оси Y, если мышь вышла за границы по оси X, но спасибо! Я только недавно начал изучать JS (да и программирование в целом), так что оптимизация и кэширование пока не для меня :)