@vasya2004

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

Привет всем! В ходе изучения JS сделал такую штуку, что при нажатии d и a(англ), блоку добавляется-уменьшается левый марджин, то есть блок перемещается по родительскому элементу. Проблема: двигающийся элемент выпадает из родительского. Как сделать, чтобы он также мог перемещаться, но не выпадать из род.блока? Через что(CSS, JS)?
https://codepen.io/hihihi05/pen/wvzreNR
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 3
serjikz
@serjikz
web-developer
1. Измерить блок-родитель
2. Установить ограничение в точке, где будет останавливаться передвигающийся (ширина родитея наверно отнять сколько-то px так как у вас рамка там ну и точка остановки может должна быть ещё левее чем рамка начинается, вычислить это так)
3. При движении вычислять каждый раз координаты правой грани передвигающегося блока и если координаты правой грани равны или больше чем ограничение - то приравнивать позицию left как координату ограничения минус ширина передвигающегося блока.

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

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

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

CSS тут не поможет, position тут не причем, двигать можно хоть меняя margin-left, хоть translateX(), хоть будет передвигаемый с absolute (тогда блок родитель схлопнется, имейте ввиду, абсолютное позиционирование выводит блок из потока), хоть с relative, как угодно.
Ответ написан
@guryanov_junior
Изучающий фронтенд.
Попробуйте для wrapper добавить position relative.
А для item - position absolute с координатами
Ответ написан
cannibal_corpse
@cannibal_corpse
Верстальщик руками
Надо немного погуглить про коллизию объектов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы