Модальные окна и диалоги

Interact.js предоставляет мощные инструменты для создания интерактивных элементов пользовательского интерфейса, включая модальные окна и диалоговые панели. Основные возможности библиотеки включают перетаскивание (drag), изменение размера (resize) и инерцию движения, что позволяет создавать гибкие и отзывчивые интерфейсы.

Для модальных окон особенно полезны функции drag и resize, позволяющие пользователю перемещать окно по экрану и изменять его размеры в реальном времени.

Настройка перетаскивания модального окна

Для того чтобы модальное окно можно было перетаскивать, используется метод interact(target).draggable(options). Основные параметры:

  • inertia — включает инерцию движения при отпускании элемента.
  • modifiers — позволяет ограничивать перемещение в пределах контейнера или определённой области.
  • listeners — набор событий для отслеживания движения (start, move, end).

Пример кода:

interact('.modal')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    listeners: {
      start (event) {
        console.log('Начало перемещения', event.target);
      },
      move (event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      },
      end (event) {
        console.log('Перемещение завершено', event.target);
      }
    }
  });

Ключевой момент: использование атрибутов data-x и data-y позволяет сохранять текущую позицию окна между перемещениями и корректно применять трансформации.

Изменение размера модальных окон

Для создания динамически масштабируемых окон применяется метод interact(target).resizable(options). Важные параметры:

  • edges — указывает, какие стороны окна будут активными для изменения размера (top, left, bottom, right).
  • modifiers — ограничивает минимальные и максимальные размеры, предотвращая «схлопывание» окна.
  • listeners — отслеживает события изменения размера (start, move, end).

Пример:

interact('.modal')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 200, height: 150 },
        max: { width: 800, height: 600 }
      })
    ],
    listeners: {
      move (event) {
        const target = event.target;
        let x = (parseFloat(target.getAttribute('data-x')) || 0);
        let y = (parseFloat(target.getAttribute('data-y')) || 0);

        target.style.width = `${event.rect.width}px`;
        target.style.height = `${event.rect.height}px`;

        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  });

Выделение ключевого момента: сочетание deltaRect и transform обеспечивает корректное масштабирование даже при перемещении окна одновременно с изменением размера.

Комбинирование drag и resize

Interact.js позволяет одновременно использовать перетаскивание и изменение размера для одного элемента. Для модальных окон это создаёт полноценный интерактивный интерфейс, где окно можно перемещать и масштабировать свободно.

interact('.modal')
  .draggable({ /* параметры drag */ })
  .resizable({ /* параметры resize */ });

При этом важно учитывать правильное управление координатами через data-x и data-y, чтобы оба действия не конфликтовали друг с другом.

Ограничение области движения и размеров

Для модальных окон часто требуется, чтобы окно не выходило за пределы родительского контейнера. Interact.js предоставляет модификаторы:

  • restrictRect — ограничивает перемещение в заданной области.
  • restrictSize — задаёт минимальные и максимальные размеры окна.

Пример комбинирования:

modifiers: [
  interact.modifiers.restrictRect({ restriction: 'parent', endOnly: true }),
  interact.modifiers.restrictSize({ min: { width: 200, height: 150 } })
]

Это позволяет создавать окна с предсказуемым поведением, предотвращая перекрытие других элементов интерфейса или выход за пределы видимой области.

Обработка событий для модальных диалогов

Interact.js поддерживает несколько событий жизненного цикла:

  • dragstart / resizestart — начало взаимодействия.
  • dragmove / resizemove — движение или изменение размера.
  • dragend / resizeend — завершение действия.

Для модальных окон часто применяются следующие сценарии:

  • Сохранение позиции после закрытия и повторного открытия.
  • Валидация размеров перед применением изменений.
  • Анимации при завершении перемещения для плавного возврата в допустимую область.

Интеграция с модальными библиотеками

Interact.js легко интегрируется с существующими библиотеками для модальных окон (например, Bootstrap Modal или кастомными диалогами). Используется для добавления интерактивности поверх стандартного функционала:

  • Перетаскивание заголовка модального окна.
  • Масштабирование по границам.
  • Ограничение движения в пределах окна браузера.

Пример совместного использования:

const modal = document.querySelector('#customModal');
interact(modal)
  .draggable({ /* drag options */ })
  .resizable({ /* resize options */ });

Такой подход позволяет создавать динамичные, интерактивные диалоги без необходимости полностью переписывать модальные библиотеки.

Продвинутые возможности: инерция и snap

  • Инерция (inertia) позволяет элементам продолжать движение после отпускания, создавая естественный эффект скольжения.
  • Snap помогает «прилипать» элементам к сетке или заранее заданным точкам, полезно для модальных окон, которые должны центрироваться или выравниваться относительно других элементов.

Пример snap:

interact('.modal')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [interact.createSnapGrid({ x: 50, y: 50 })],
        range: Infinity,
        relativePoints: [{ x: 0, y: 0 }]
      })
    ]
  });

Это обеспечивает точное позиционирование окна и улучшает UX при перетаскивании и выравнивании диалогов.

Эти инструменты Interact.js создают основу для создания гибких, адаптивных и интерактивных модальных окон и диалогов в веб-приложениях, позволяя управлять положением, размером и поведением элементов с высокой точностью.

Оглавление