> Как реализовать перетаскивание модального окна мышкой на чистом JavaScript с использованием событий? (JavaScript)

Для реализации перетаскивания модального окна мышкой на чистом JavaScript нужно использовать три события: mousedown, mousemove и mouseup. Основная идея - при нажатии на заголовок окна запоминаем начальные координаты мыши и текущее положение окна, затем при движении мыши обновляем позицию окна, а при отпускании - прекращаем обработку.

Вот пример реализации:

JAVASCRIPT
const modal = document.getElementById('modal');
const header = document.getElementById('modal-header');

let isDragging = false;
let offsetX, offsetY;

header.addEventListener('mousedown', (e) => {
  isDragging = true;
  // Запоминаем смещение курсора относительно окна
  const rect = modal.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  // Предотвращаем выделение текста
  e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // Вычисляем новые координаты с учетом смещения
  const newLeft = e.clientX - offsetX;
  const newTop = e.clientY - offsetY;
  // Применяем позиционирование (окно должно быть position: absolute или fixed)
  modal.style.left = newLeft + 'px';
  modal.style.top = newTop + 'px';
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

Важные моменты:

• Окно должно иметь CSS-свойство position: absolute или fixed (обычно fixed для модалок).
• События mousemove и mouseup вешаются на document, чтобы перетаскивание работало даже при быстром движении мыши за пределами окна.
• e.preventDefault() в mousedown предотвращает выделение текста или другие нежелательные действия браузера.
• Для мобильных устройств аналогично используют события touchstart, touchmove, touchend с координатами e.touches[0].clientX/Y.

Этот код можно расширить, добавив проверку границ экрана или изменение курсора при перетаскивании.