Как сделать, чтобы блок не уходил за пределы родительского?

Question

[vasya2004]

Привет всем! В ходе изучения JS сделал такую штуку, что при нажатии d и a(англ), блоку добавляется-уменьшается левый марджин, то есть блок перемещается по родительскому элементу. Проблема: двигающийся элемент выпадает из родительского. Как сделать, чтобы он также мог перемещаться, но не выпадать из род.блока? Через что(CSS, JS)?
https://codepen.io/hihihi05/pen/wvzreNR

Comments

[Zhandoss]

Тебе нужно задать родителю position relative чтобы он позиционировал относительно родителя, задай внутреннему блоку position absolute и выполняй логику

Answer 1

[Сергей ZSA]

1. Измерить блок-родитель
2. Установить ограничение в точке, где будет останавливаться передвигающийся (ширина родитея наверно отнять сколько-то px так как у вас рамка там ну и точка остановки может должна быть ещё левее чем рамка начинается, вычислить это так)
3. При движении вычислять каждый раз координаты правой грани передвигающегося блока и если координаты правой грани равны или больше чем ограничение - то приравнивать позицию left как координату ограничения минус ширина передвигающегося блока.

Это решит выпадания из родителя слева и справа.

Нужно чтоб не выпадал из потока (грубо говоря вниз не уезжал) - задайте элементу position: relative; или используйте margin-left/translateX для передвижения

В целом тут js-а не много. Писать готовое решение не хочу вам, чтоб подумали и погуглили самостоятельно, как это можно сделать всё))

CSS тут не поможет, position тут не причем, двигать можно хоть меняя margin-left, хоть translateX(), хоть будет передвигаемый с absolute (тогда блок родитель схлопнется, имейте ввиду, абсолютное позиционирование выводит блок из потока), хоть с relative, как угодно.

Answer 2

[Ваня Гурьянов]

Попробуйте для wrapper добавить position relative.
А для item - position absolute с координатами

Answer 3

[Ilya Olovyannikov]

Надо немного погуглить про коллизию объектов