Миграция с предыдущих версий

Миграция между версиями Interact.js часто связана не только с изменением отдельных методов, но и с переработкой внутренней архитектуры. Начиная с поздних веток развития библиотеки, разработчики сместили фокус в сторону модульности, улучшенной системы событий и более строгой типизации API.

Ключевые изменения затрагивают:

  • структуру подключения библиотеки;
  • конфигурацию действий (actions);
  • обработчики событий;
  • плагины и модульную систему;
  • параметры ограничений и модификаторов;
  • совместимость с современными сборщиками.

Переход на новую версию требует анализа старого кода, так как некоторые методы были удалены или заменены альтернативными механизмами.

Изменения в подключении библиотеки

В ранних версиях Interact.js библиотека чаще всего подключалась напрямую через глобальный объект.

Пример старого подключения:

<script src="interact.min.js"></script>

После подключения глобальная функция interact становилась доступной во всём приложении.

Современные версии библиотеки ориентированы на использование модульных систем.

Использование ES-модулей

import interact from 'interactjs'

Такой подход позволяет:

  • использовать tree-shaking;
  • уменьшать итоговый размер бандла;
  • более гибко управлять зависимостями.

Подключение через пакетные менеджеры

Чаще всего библиотека устанавливается через:

npm install interactjs

или

yarn add interactjs

После установки доступна модульная структура пакета.

Изменения API для перетаскивания (draggable)

Одно из наиболее заметных изменений касается настройки действий.

Старый синтаксис

В ранних версиях библиотека использовала компактную конфигурацию:

interact('.item').draggable(true)

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

interact('.item').on('dragmove', function (event) {
  const target = event.target
  target.style.transform =
    'translate(' + event.dx + 'px, ' + event.dy + 'px)'
})

Новый синтаксис

Современные версии используют объект конфигурации:

interact('.item').draggable({
  listeners: {
    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)
    }
  }
})

Основные преимущества:

  • обработчики объединены в конфигурацию;
  • уменьшено количество отдельных вызовов API;
  • улучшена читаемость кода.

Система listeners вместо событий .on()

В старых версиях основной механизм обработки событий выглядел так:

interact('.box')
  .draggable(true)
  .on('dragstart', startHandler)
  .on('dragmove', moveHandler)
  .on('dragend', endHandler)

В современных версиях предпочтительно использовать объект listeners.

interact('.box').draggable({
  listeners: {
    start(event) {
      // начало перетаскивания
    },

    move(event) {
      // перемещение
    },

    end(event) {
      // завершение
    }
  }
})

Преимущества нового подхода:

  • конфигурация сосредоточена в одном месте;
  • легче управлять логикой действий;
  • удобнее использовать TypeScript.

Изменения в системе модификаторов

В ранних версиях ограничения задавались напрямую через параметры.

Старый способ ограничения области

interact('.box').draggable({
  restrict: {
    restriction: 'parent'
  }
})

Этот механизм был заменён системой modifiers.

Новый способ

interact('.box').draggable({
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent'
    })
  ]
})

Система модификаторов значительно расширяет возможности настройки.

К доступным модификаторам относятся:

  • restrict
  • restrictRect
  • snap
  • snapSize
  • snapEdges
  • aspectRatio

Каждый модификатор представляет собой отдельную функцию конфигурации.

Миграция ограничений (restrict)

Старый код

interact('.item').draggable({
  restrict: {
    restriction: '#container',
    endOnly: true
  }
})

Новый код

interact('.item').draggable({
  modifiers: [
    interact.modifiers.restrict({
      restriction: '#container',
      endOnly: true
    })
  ]
})

Разница заключается в переносе параметров в массив modifiers.

Изменения в snap-механизме

Привязка к сетке или координатам также была переработана.

Старый синтаксис

interact('.item').draggable({
  snap: {
    targets: [
      interact.createSnapGrid({ x: 20, y: 20 })
    ]
  }
})

Новый синтаксис

interact('.item').draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [
        interact.snappers.grid({ x: 20, y: 20 })
      ]
    })
  ]
})

Основные изменения:

  • createSnapGrid заменён на snappers.grid
  • параметры перенесены в модификатор.

Изменения в resize API

Механизм изменения размеров элементов также получил обновлённый синтаксис.

Старый код

interact('.resizable').resizable(true)

interact('.resizable').on('resizemove', function (event) {
  const target = event.target
  target.style.width = event.rect.width + 'px'
  target.style.height = event.rect.height + 'px'
})

Новый код

interact('.resizable').resizable({
  edges: { left: true, right: true, bottom: true, top: true },

  listeners: {
    move(event) {
      const target = event.target

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

Изменения:

  • обработчик перемещения перенесён в listeners;
  • конфигурация edges стала обязательной для большинства сценариев.

Изменения в gesture API

Поддержка жестов (масштабирование и вращение) в новых версиях более стандартизирована.

Старый код

interact('.gesture-area').gesturable(true)

interact('.gesture-area').on('gesturemove', function (event) {
  console.log(event.scale)
})

Новый код

interact('.gesture-area').gesturable({
  listeners: {
    move(event) {
      console.log(event.scale)
    }
  }
})

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

Изменения в dropzone API

Drop-зоны применяются для обработки перетаскивания элементов в определённую область.

Старый синтаксис

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.5
})

interact('.dropzone').on('drop', function (event) {
  console.log('Dropped')
})

Новый синтаксис

interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.5,

  listeners: {
    dr op ( event) {
      console.log('Dropped')
    }
  }
})

Преимущества:

  • уменьшение количества цепочек методов;
  • единый формат конфигурации.

Изменения в системе событий

Современные версии библиотеки предоставляют более структурированную модель событий.

Типичные события действий:

Drag

  • start
  • move
  • end
  • inertiastart

Resize

  • start
  • move
  • end

Gesture

  • start
  • move
  • end

Каждое событие передаёт объект InteractEvent, содержащий:

  • target
  • dx, dy
  • pageX, pageY
  • rect
  • velocityX, velocityY
  • duration

Изменения в инерции (inertia)

В старых версиях инерция включалась простым параметром.

Старый код

interact('.box').draggable({
  inertia: true
})

Новый синтаксис позволяет гибко настраивать поведение.

interact('.box').draggable({
  inertia: {
    resistance: 10,
    minSpeed: 100,
    endSpeed: 10
  }
})

Параметры:

Параметр Назначение
resistance сопротивление движению
minSpeed минимальная скорость запуска
endSpeed скорость остановки

Изменения в autoScroll

Механизм автоматической прокрутки контейнера при перетаскивании также был переработан.

Новый синтаксис

interact('.item').draggable({
  autoScroll: true
})

Для более тонкой настройки используется объект:

autoScroll: {
  container: document.body,
  margin: 50,
  speed: 300
}

Удалённые и устаревшие функции

При миграции следует учитывать список удалённых методов.

Устаревшие методы

Старый метод Современная альтернатива
.draggable(true) .draggable({ ... })
.on('dragmove') listeners.move
restrict modifiers.restrict
snap modifiers.snap
createSnapGrid snappers.grid

Использование старых методов может привести к ошибкам или предупреждениям в консоли.

Переход на модульную систему плагинов

В новых версиях многие возможности реализованы как плагины.

Некоторые плагины подключаются автоматически, но могут импортироваться отдельно:

import interact from 'interactjs'
import autoScroll from '@interactjs/auto-scroll'

Регистрация плагина:

interact.use(autoScroll)

Такой подход позволяет:

  • подключать только необходимые функции;
  • уменьшать размер сборки;
  • создавать собственные плагины.

Типичные проблемы при миграции

Конфликты обработчиков

Смешивание старого и нового API приводит к двойному выполнению событий.

Неправильно:

interact('.box')
  .draggable(true)
  .on('dragmove', handler)

Правильно:

interact('.box').draggable({
  listeners: {
    move: handler
  }
})

Некорректная работа restrict

Причина — использование старого параметра restrict.

Решение — перенос в modifiers.

Ошибки snap-механизма

Причина — использование устаревшего createSnapGrid.

Решение:

interact.snappers.grid()

Стратегия безопасной миграции

На практике переход на новую версию Interact.js выполняется поэтапно.

Шаг 1. Обновление зависимости

npm update interactjs

Шаг 2. Проверка консольных предупреждений

Современные версии библиотеки выводят предупреждения о deprecated-методах.

Шаг 3. Замена обработчиков событий

Все .on() желательно заменить на listeners.

Шаг 4. Перенос ограничений в modifiers

Все настройки restrict, snap и aspectRatio должны быть переписаны через систему модификаторов.

Шаг 5. Проверка поведения drag/resize

После миграции необходимо протестировать:

  • инерцию;
  • ограничения области;
  • работу dropzone;
  • snapping.

Рекомендации по модернизации старого кода

При миграции разумно не просто переписывать API, но и улучшать архитектуру приложения.

Практика показывает эффективность следующих подходов:

Разделение логики действий

const dragMove = (event) => {
  // логика перемещения
}

Использование модулей

export function initDrag() {
  interact('.item').draggable({ ... })
}

Хранение координат в dataset

target.dataset.x
target.dataset.y

Это упрощает поддержку состояния элемента.

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

Современные версии Interact.js оптимизированы для:

  • touch-устройств;
  • Pointer Events;
  • аппаратного ускорения CSS.

Для максимальной производительности рекомендуется использовать:

transform: translate()

вместо изменения top и left.

Совместимость с современными фреймворками

После миграции библиотека лучше интегрируется с современными инструментами:

  • React
  • Vue
  • Angular
  • Svelte

Главная причина — использование модульной архитектуры и изолированных конфигураций действий.

Проверка совместимости браузеров

Новые версии Interact.js ориентированы на:

  • Pointer Events
  • современные DOM API

Минимально поддерживаемые браузеры обычно включают:

  • Chrome
  • Firefox
  • Safari
  • Edge

Поддержка старых версий Internet Explorer была постепенно прекращена.

Оглавление