1

Хочется сделать эффект на JS, чтобы при удерживании LMB на .changer и при перетаскивании его из стороны в сторону менялась ширина .block, как в Paint или Photoshop, есть идея сделать это через событие mousemove, но не знаю как реализовать синюю пунктирную рамку как в самом Paint.
Помогите пожалуйста!)

.block {
  width: 500px;
  height: 500px;
  background: lightgreen;
}

.changer {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  background-color: #fff;
  left: 500px;
  top: 250px;
}
<div class="block">
  <div class="changer"></div>
</div>

1 ответ 1

2

Об этом идёт речь?

body {
  height: 100vh;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.resize {
  display: block;
  min-width: 10px;
  width: 100px;
  max-width: 100%;
  min-height: 10px;
  height: 100px;
  max-height: 100%;
  border: 1px solid blue;
  overflow: hidden;
  box-sizing: border-box;
  resize: both;
}
<div class="resize"></div>

3
  • Спасибо, про css совсем забыл, но есть ли в js событие, например onresize (?) или нечто подобное? Мне просто нужно будет ещё и canvas внутри .resize масштабировать. Ну, и ещё вопрос - можно ли стилизовать ползунок, за который тащит пользователь, например, скрыв его и добавив ::after? 7 авг 2020 в 2:08
  • Вот как раз в приведённым кодом .resize() не работает, есть такой способ - ссылка
    – De.Minov
    7 авг 2020 в 5:56
  • Ладно, я уже разобрался, и сляпал свой собственный говнокодик, который работает почти так, как надо, но, к сожалению, не могу понять в чём причина косяков. Поможете? codepen.io/Jizzybole/pen/gOrbzwX 7 авг 2020 в 13:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.