AllowResume - продолжение движения

Параметр allowResume управляет поведением объектов при прерывании и возобновлении интерактивных действий, таких как drag, resize и gesturable. Его основной функцией является определение того, можно ли возобновить действие с точки, на которой оно было остановлено, или действие должно начаться заново с исходного состояния.

В Interact.js allowResume применяется как на уровне глобальных настроек, так и для отдельных элементов через методы .draggable(), .resizable() и .gesturable().

interact('.draggable')
  .draggable({
    allowResume: true,
    listeners: {
      start (event) { console.log('Начало:', event) },
      move (event) { console.log('Движение:', event) },
      end (event) { console.log('Конец:', event) }
    }
  });

При allowResume: true элемент будет сохранять состояние между событиями, и при повторном захвате курсора интерактивное действие продолжится с текущей позиции, а не сбросится к исходной.

Прерывание и возобновление действий

Interact.js фиксирует прерывание действий через внутренние события, такие как interruption или когда пользователь отпускает мышь/палец. Если allowResume отключен, повторное начало действия всегда инициируется с исходной позиции.

Пример:

interact('.draggable')
  .draggable({
    allowResume: false,
    inertia: true
  });

Здесь, даже если элемент был перетащен и пользователь снова нажал на него, drag начнется с исходной позиции. При включенном allowResume объект продолжит движение с текущих координат.

Взаимодействие с инерцией

Параметр inertia тесно связан с allowResume. Инерция позволяет элементу продолжать движение после отпускания курсора, имитируя физический эффект.

Если allowResume: true, объект может возобновить инерцию, сохраняя скорость и направление.
Если allowResume: false, объект сбрасывает инерцию, и при новом захвате движение начинается заново.

interact('.draggable')
  .draggable({
    inertia: {
      resistance: 16,
      minSpeed: 100,
      endSpeed: 10
    },
    allowResume: true
  });

Это позволяет создавать естественные анимации и плавное продолжение движения.

Совместное использование с сеткой (`snap`) и ограничениями (`restrict`)

При использовании snap или restrict поведение allowResume также важно:

Snap: элемент может продолжить движение с текущей позиции, но при достижении ближайшей точки сетки произойдет привязка.
Restrict: элемент продолжит движение, соблюдая ограничения области, но не выйдет за границы.

interact('.draggable')
  .draggable({
    allowResume: true,
    modifiers: [
      interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 50, y: 50 })] }),
      interact.modifiers.restrictRect({ restriction: 'parent' })
    ]
  });

Использование allowResume в сочетании с модификаторами обеспечивает плавное и предсказуемое поведение при перетаскивании элементов.

Примеры практического применения

Продолжение drag после временной остановки

let isPaused = false;

interact('.draggable')
  .draggable({
    allowResume: true,
    listeners: {
      move (event) {
        if (!isPaused) {
          event.target.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;
        }
      }
    }
  });

// Позднее можно временно остановить движение
isPaused = true;
// И возобновить без сброса позиции
isPaused = false;

Сохранение состояния resize

interact('.resizable')
  .resizable({
    allowResume: true,
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset;
        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });

        Object.assign(event.target.dataset, { x, y });
      }
    }
  });

В этом примере объект может быть продолжен с текущих размеров и позиции, что делает интерфейс более отзывчивым.

Важные нюансы

allowResume не сохраняет события между сессиями. Если страница обновляется, состояние сбрасывается.
Использование с inertia требует тщательной настройки параметров сопротивления и минимальной скорости, чтобы движение выглядело естественно.
При комбинации с модификаторами snap/restrict иногда требуется тонкая настройка, чтобы избежать “скачков” при возобновлении действия.