Устаревшие возможности

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

API библиотеки постепенно переходило от простых конфигурационных методов к более модульной системе, основанной на действиях (actions), событиях (events) и модификаторах (modifiers). Такой подход позволяет гибко настраивать поведение элементов без необходимости писать сложную логику обработки.

Основные изменения API можно разделить на несколько направлений:

  • изменение структуры конфигурации действий
  • внедрение модификаторов
  • переработка системы событий
  • обновление способов ограничения и привязки элементов
  • улучшение управления состоянием взаимодействия

Изменение структуры конфигурации действий

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

  • draggable()
  • resizable()
  • gesturable()
  • dropzone()

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

Пример старого подхода

interact('.box').draggable({
  onmove: dragMoveListener,
  onstart: dragStartListener,
  onend: dragEndListener
});

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

Со временем структура была изменена. Обработчики событий стали выноситься в отдельный механизм подписки через метод on().

Новый подход

interact('.box')
  .draggable(true)
  .on('dragmove', dragMoveListener)
  .on('dragstart', dragStartListener)
  .on('dragend', dragEndListener);

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

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

Унификация системы событий

Одним из ключевых изменений API стала унификация событий.

Ранее события были привязаны к конкретным конфигурационным свойствам (onmove, onstart). В новой архитектуре события становятся полноценной системой подписки.

Основные события действий

Drag

  • dragstart
  • dragmove
  • dragend

Resize

  • resizestart
  • resizemove
  • resizeend

Gesture

  • gesturestart
  • gesturemove
  • gestureend

Подписка на события

interact('.item')
  .on('dragmove', function (event) {
    console.log(event.dx, event.dy);
  });

Отписка от события

interact('.item').off('dragmove', handler);

Подписка на несколько событий

interact('.item').on({
  dragstart(event) {},
  dragmove(event) {},
  dragend(event) {}
});

Такой механизм делает API более похожим на систему событий DOM.

Обновление объекта события

С развитием API был переработан объект события, передаваемый обработчикам.

Современный объект события содержит большое количество полезных свойств.

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

Свойство Описание
target DOM-элемент взаимодействия
currentTarget текущий элемент слушателя
dx изменение позиции по X
dy изменение позиции по Y
rect текущий прямоугольник элемента
deltaRect изменение размеров
velocityX скорость по X
velocityY скорость по Y
pageX координата указателя
pageY координата указателя

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

interact('.card').on('dragmove', function (event) {
  const x = (parseFloat(event.target.dataset.x) || 0) + event.dx;
  const y = (parseFloat(event.target.dataset.y) || 0) + event.dy;

  event.target.style.transform = `translate(${x}px, ${y}px)`;

  event.target.dataset.x = x;
  event.target.dataset.y = y;
});

Такой объект события значительно расширяет возможности управления элементами.

Введение модификаторов

Одним из самых значимых изменений API стало появление модификаторов (modifiers).

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

Основная идея

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

Примеры задач модификаторов:

  • ограничение перемещения
  • привязка к сетке
  • сохранение пропорций
  • ограничение размеров
  • предотвращение выхода за границы

Использование модификаторов

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

Ограничение перемещения (restrict)

Ранее ограничения реализовывались через параметр restrict.

Новая версия API перенесла эту функциональность в систему модификаторов.

Старый API

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

Новый API

interact('.item').draggable({
  modifiers: [
    interact.modifiers.restrict({
      restriction: 'parent'
    })
  ]
});

Это изменение позволило:

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

Привязка к сетке (snap)

Механизм snap также был перенесён в систему модификаторов.

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

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

Параметры:

Параметр Назначение
targets точки привязки
range радиус срабатывания
offset смещение привязки

Обновление API изменения размеров

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

Новая версия API вводит более детальную конфигурацию.

Пример новой конфигурации

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

Свойство edges определяет стороны, с которых можно изменять размер.

Изменение обработки прямоугольников

API обновило систему работы с размерами через объект rect.

Структура rect

event.rect = {
  width: Number,
  height: Number,
  left: Number,
  right: Number,
  top: Number,
  bottom: Number
}

Также добавлен объект deltaRect.

deltaRect

event.deltaRect = {
  left: Number,
  right: Number,
  top: Number,
  bottom: Number
}

Это позволяет вычислять изменения размеров без ручных расчетов.

Новая система dropzone

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

Конфигурация dropzone

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

Основные параметры

Параметр Назначение
accept селектор допустимых элементов
overlap уровень пересечения
checker пользовательская функция проверки

События dropzone

Dropzone имеет собственную систему событий.

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

  • dropactivate
  • dropdeactivate
  • dragenter
  • dragleave
  • drop

Пример обработки

interact('.dropzone')
  .on('dragenter', function (event) {
    event.target.classList.add('active');
  })
  .on('dragleave', function (event) {
    event.target.classList.remove('active');
  })
  .on('drop', function (event) {
    console.log('Dropped!');
  });

Улучшение системы gesturable

API жестов используется для обработки мультитач-взаимодействий.

Поддерживаются:

  • масштабирование
  • вращение
  • перемещение двумя пальцами

Пример конфигурации

interact('.image').gesturable({
  listeners: {
    move(event) {
      console.log(event.scale);
      console.log(event.angle);
    }
  }
});

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

Свойство Назначение
scale коэффициент масштабирования
angle угол поворота
ds изменение масштаба
da изменение угла

Появление listeners API

Одним из новых элементов API стала возможность группировать обработчики событий через listeners.

Пример

interact('.box').draggable({
  listeners: {
    start(event) {},
    move(event) {},
    end(event) {}
  }
});

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

  • более компактная конфигурация
  • структурированная логика
  • уменьшение количества вызовов on()

Механизм inertia

API добавило поддержку инерции движения.

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

Пример

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

Дополнительные параметры:

inertia: {
  resistance: 10,
  minSpeed: 100,
  endSpeed: 10
}
Параметр Описание
resistance сопротивление
minSpeed минимальная скорость
endSpeed скорость остановки

Обновление системы autoScroll

AutoScroll позволяет автоматически прокручивать контейнер при перетаскивании.

Пример

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

Расширенная конфигурация:

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

Переход на модульную архитектуру

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

Импорт через ES-модули

import interact from 'interactjs';

Это позволяет:

  • уменьшать размер бандла
  • использовать tree-shaking
  • подключать только необходимые модули

Улучшение управления экземплярами interact

API предоставляет методы для управления интерактивными объектами.

Получение экземпляра

const interactable = interact('.box');

Удаление взаимодействия

interactable.unset();

Проверка действия

interactable.draggable();

Изменения в системе ограничений размеров

API добавило модификатор restrictSize.

Пример

interact('.panel').resizable({
  modifiers: [
    interact.modifiers.restrictSize({
      min: { width: 200, height: 100 },
      max: { width: 800, height: 600 }
    })
  ]
});

Это позволяет контролировать диапазон размеров элемента.

Модификатор сохранения пропорций

Для изменения размеров был добавлен модификатор aspectRatio.

Пример

interact('.image').resizable({
  modifiers: [
    interact.modifiers.aspectRatio({
      ratio: 16 / 9
    })
  ]
});

Элемент сохраняет заданное соотношение сторон во время изменения размеров.

Изменение системы snap targets

API расширило систему целей привязки.

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

interact.modifiers.snap({
  targets: [
    { x: 100, y: 100 },
    { x: 300, y: 300 }
  ]
});

Также появилась поддержка динамических целей через функции.

targets: [
  function (x, y) {
    return { x: Math.round(x / 50) * 50, y: Math.round(y / 50) * 50 };
  }
]

Улучшение работы с Pointer Events

Новые версии библиотеки перешли на использование Pointer Events вместо отдельных систем:

  • mouse events
  • touch events

Это обеспечивает:

  • унифицированную обработку указателей
  • поддержку стилусов
  • более стабильную работу на мобильных устройствах

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

API добавило поддержку нескольких систем координат:

  • page
  • client
  • screen

Это улучшило совместимость с различными контейнерами и прокруткой страницы.

Расширение возможностей кастомных действий

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

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

Плагин может:

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

Это делает библиотеку не только инструментом для drag-and-drop, но и полноценной платформой для построения сложных интерактивных интерфейсов.

Оглавление