Объект Interactable

Interactable — это ключевой объект библиотеки Interact.js, который представляет HTML-элемент или группу элементов с возможностью интерактивного поведения. Этот объект позволяет управлять перетаскиванием, изменением размеров и жестами, задавая детализированные параметры взаимодействия. Каждому DOM-элементу можно сопоставить один Interactable через функцию interact():

const box = document.querySelector('.draggable');
const draggableInteractable = interact(box);

После этого draggableInteractable становится точкой настройки всех событий и опций для элемента.

Настройка перетаскивания

Чтобы объект реагировал на перетаскивание, используется метод draggable():

draggableInteractable.draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent',
      endOnly: true
    })
  ],
  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);
    }
  }
});

Ключевые моменты:

  • inertia включает эффект инерции при отпускании элемента.
  • modifiers позволяют ограничивать область перемещения, например до родительского контейнера.
  • listeners.move срабатывает на каждом шаге перемещения и используется для изменения позиции элемента.

Управление изменением размеров

Метод resizable() позволяет задавать интерактивное изменение размеров:

draggableInteractable.resizable({
  edges: { left: true, right: true, bottom: true, top: true },
  listeners: {
    move(event) {
      const target = event.target;
      let { width, height } = event.rect;

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

      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.deltaRect.left;
      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.deltaRect.top;

      target.style.transform = `translate(${x}px, ${y}px)`;
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  },
  modifiers: [
    interact.modifiers.restrictSize({
      min: { width: 50, height: 50 },
      max: { width: 500, height: 500 }
    })
  ],
  inertia: true
});

Особенности:

  • edges определяет, с каких сторон можно изменять размеры.
  • modifiers.restrictSize ограничивает минимальные и максимальные размеры.
  • event.deltaRect позволяет корректировать позицию элемента при изменении размеров.

Совмещение перетаскивания и изменения размеров

Interact.js позволяет комбинировать действия на одном элементе:

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

При этом объект Interactable управляет всеми настройками одновременно, автоматически синхронизируя события.

Настройка жестов (gestures)

Interactable поддерживает мультитач жесты: масштабирование и вращение через метод gesturable():

draggableInteractable.gesturable({
  listeners: {
    move(event) {
      const target = event.target;
      const currentScale = parseFloat(target.getAttribute('data-scale')) || 1;
      const newScale = currentScale * (1 + event.ds);

      target.style.transform = `scale(${newScale}) rotate(${event.angle}deg)`;
      target.setAttribute('data-scale', newScale);
    }
  }
});

Особенности:

  • event.ds — изменение масштаба.
  • event.angle — угол поворота.
  • Можно комбинировать с перетаскиванием и изменением размеров, создавая сложные интерактивные элементы.

Управление поведением и событиями

Interactable предоставляет гибкую систему событий:

  • События начала взаимодействия: on('dragstart', callback)
  • События перемещения: on('dragmove', callback)
  • События завершения: on('dragend', callback)

Пример:

draggableInteractable.on('dragstart', event => {
  event.target.style.borderColor = 'red';
});

draggableInteractable.on('dragend', event => {
  event.target.style.borderColor = '';
});

Методы on и off позволяют добавлять и удалять обработчики событий, что делает объект гибким в управлении интерактивностью.

Модификаторы и ограничения

Interactable поддерживает мощные модификаторы:

  • restrictRect — ограничение перемещения по области.
  • restrictSize — ограничение размеров.
  • snap — привязка к сетке или другим элементам.
  • restrictEdges — ограничение движения по краям контейнера.

Модификаторы передаются через массив modifiers и могут применяться к любому типу действия (drag, resize, gesture).

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

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

interact('.list-item')
  .draggable({
    listeners: { move: dragMoveListener },
    ignoreFrom: '.non-draggable',
    allowFrom: '.handle'
  });

Пояснения:

  • ignoreFrom исключает элементы, по которым нельзя инициировать перетаскивание.
  • allowFrom разрешает взаимодействие только с указанными элементами.

Настройка автоматического включения/отключения действий

Через объект Interactable можно динамически изменять поведение элемента:

draggableInteractable.draggable(false); // отключить перетаскивание
draggableInteractable.draggable(true);  // включить обратно

Также можно изменять отдельные опции без пересоздания объекта:

draggableInteractable.draggable({ inertia: false }); // отключить инерцию

Итоговое понимание Interactable

Объект Interactable является сердцем системы интерактивности Interact.js, позволяя:

  • Настраивать перетаскивание, изменение размеров и жесты.
  • Управлять событиями с высокой точностью.
  • Применять ограничения и привязки через модификаторы.
  • Работать с группами элементов через делегирование.
  • Динамически менять поведение без пересоздания объектов.

Он формирует основу для создания интерактивных интерфейсов и сложных UI-компонентов с минимальными усилиями.

Оглавление