Доступ к DOM элементам

Interact.js предоставляет гибкий и мощный API для взаимодействия с элементами DOM через события drag, drop, resize и gestures. Работа начинается с выбора элементов через стандартные DOM-селекторы, что позволяет точно указать область взаимодействия.

interact('.draggable')
  .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);
      }
    }
  });

В этом примере event.target напрямую предоставляет доступ к DOM-элементу, с которым происходит взаимодействие. Любые изменения стилей, атрибутов или классов можно выполнять сразу через этот объект.

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

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

interact('.resizable, .draggable')
  .draggable(true)
  .resizable(true);

Для ограничения взаимодействия с определёнными элементами можно использовать опцию allowFrom:

interact('.item')
  .draggable({
    allowFrom: '.handle'
  });

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

Работа с атрибутами и dataset

Interact.js позволяет хранить состояние элемента напрямую в его dataset. Это облегчает синхронизацию с DOM без внешних переменных:

function dragMoveListener(event) {
  const target = event.target;
  const x = (parseFloat(target.dataset.x) || 0) + event.dx;
  const y = (parseFloat(target.dataset.y) || 0) + event.dy;

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

interact('.draggable').draggable({ listeners: { move: dragMoveListener } });

Использование dataset делает код чистым и предотвращает пересечения с другими переменными в глобальной области видимости.

Манипуляции с классами и стилями

Для динамического изменения внешнего вида при взаимодействии используют стандартные методы DOM:

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        event.target.classList.add('dragging');
      },
      end(event) {
        event.target.classList.remove('dragging');
      }
    }
  });

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

Доступ к родительским и дочерним элементам

event.target предоставляет не только сам элемент, но и возможность навигации по DOM:

interact('.draggable').draggable({
  listeners: {
    move(event) {
      const parent = event.target.parentElement;
      const siblings = Array.from(parent.children);
      // Можно работать с соседними элементами
    }
  }
});

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

Получение размеров и позиции

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

const rect = event.target.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const top = rect.top + window.scrollY;
const left = rect.left + window.scrollX;

Эти данные применяются для модификаторов restrictRect и snap, обеспечивая точное управление положением элементов.

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

Interact.js полностью совместим с любыми средствами манипуляции DOM, включая jQuery или чистый Jav * aScript:

interact('.draggable').draggable({
  listeners: {
    move(event) {
      $(event.target).css('opacity', 0.7); // jQuery
    }
  }
});

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

Использование событий на уровне DOM

Помимо встроенных событий Interact.js, можно добавлять обычные DOM-обработчики для элементов:

const element = document.querySelector('.draggable');
element.addEventListener('click', () => console.log('Clicked!'));

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