Как сделать всплывающее окно с возможностью перетаскивания и изменения размера на чистом JavaScript?

Оффтоп javascript
1

Помогите с созданием интерактивного модального окна

Привет всем! Мне нужно реализовать всплывающее окно, которое пользователь сможет перетаскивать мышкой по экрану и менять его размеры. Хочу написать это на ванильном JavaScript без использования готовых библиотек типа jQuery или других фреймворков.

Основные требования:

  • Окно должно работать во всех современных браузерах
  • Возможность захватить окно за заголовок и перемещать его
  • Изменение размеров через углы или края окна
  • Желательно без внешних зависимостей

Если у кого-то есть рабочие примеры кода или можете подсказать основные принципы реализации, буду очень благодарен. Может быть есть готовые решения, которые можно взять за основу?

2

А вот еще один нюанс - если планируешь делать несколько окон одновременно, то z-index обязательно динамически менять при клике на окно, чтобы активное всегда было сверху. И проверяй границы экрана, а то окно может уехать за пределы viewport и пользователь его потеряет. Еще полезно добавить двойной клик на заголовок для сворачивания/разворачивания - юзеры это ожидают по привычке от десктопных приложений.

3

Сам недавно такое делал - основной подвох в том что mousemove нужно вешать на document, а не на сам элемент, иначе при быстром движении мыши курсор может “убежать” от окна. Еще важный момент - обязательно добавь user-select: none на окно, чтобы текст не выделялся при перетаскивании. Для resize лучше всего сделать маленький треугольник в правом нижнем углу с курсором nw-resize, так интуитивно понятнее. И не забудь про preventDefault() в обработчиках, а то будет глючить.

4

Я недавно делал похожую штуку для своего проекта! Основная идея в том, чтобы отслеживать события mousedown, mousemove и mouseup. Для перетаскивания нужно вешать обработчик на заголовок окна, а для изменения размера - на специальную область в углу. Главное запоминать начальные координаты мыши и элемента, а потом просто вычислять разность и применять через style.left/top. С ресайзом чуть сложнее - там еще width и height нужно корректировать. У меня получилось реализовать примерно за 150 строк кода, работает везде нормально.