Инициализация перетаскивания

Библиотека Interact.js предоставляет мощный и гибкий механизм для реализации перетаскивания, изменения размера и жестов на элементах HTML. Для начала работы с перетаскиванием необходимо правильно инициализировать элементы, назначив им соответствующие обработчики событий и настроив параметры взаимодействия.

Подключение и подготовка

Для работы с библиотекой необходимо подключить сам Interact.js через CDN или локально:

<script src="https://cdn.jsdelivr.net/npm/@interactjs/interactjs/dist/interact.min.js"></script>

После подключения библиотеке становятся доступны методы interact(), позволяющие привязывать поведение к любому DOM-элементу.

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

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

interact('.draggable')
  .draggable({
    // настройки перетаскивания
  });

Здесь .draggable — CSS-класс элементов, которые будут перемещаться.

Основные опции draggable

Опции позволяют детально контролировать поведение перетаскивания:

  • inertia – включает инерцию при отпускании элемента, создавая эффект продолжения движения:
inertia: true
  • autoScroll – автоматически прокручивает контейнер при перемещении элемента к его границам:
autoScroll: true
  • listeners – набор функций для обработки событий:
listeners: {
  start (event) { console.log('Начало перетаскивания', event) },
  move (event) { moveElement(event) },
  end (event) { console.log('Окончание перетаскивания', event) }
}

Управление координатами

Для корректного перемещения элемента используется система координат, где обновление положения происходит через CSS-трансформации:

function moveElement(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);
}

Использование атрибутов data-x и data-y позволяет хранить текущее смещение и плавно обновлять позицию при каждом событии move.

Ограничение области перетаскивания

Для предотвращения выхода элемента за пределы контейнера применяется опция modifiers:

modifiers: [
  interact.modifiers.restrictRect({
    restriction: 'parent',  // ограничение родительским элементом
    endOnly: true
  })
]

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

Настройка осей и границ

Можно ограничить перемещение по одной оси:

draggable({
  modifiers: [
    interact.modifiers.restrict({
      restriction: 'parent',
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    })
  ],
  axis: 'x'  // только горизонтальное перемещение
});

Параметр axis принимает значения 'x', 'y' или undefined для свободного перемещения.

События жизненного цикла перетаскивания

  1. dragstart – срабатывает при начале перетаскивания. Здесь обычно включают визуальные эффекты или изменение стиля элемента.
  2. dragmove – основной обработчик перемещения, где изменяется позиция элемента.
  3. dragend – вызывается после завершения перемещения. Можно использовать для проверки конечной позиции, сохранения данных или запуска анимации возврата.

Применение перетаскивания к динамически созданным элементам

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

interact(document.body)
  .on('dragmove', '.draggable', event => {
    moveElement(event);
  });

Такой подход гарантирует, что новые элементы с классом .draggable автоматически будут поддерживать перетаскивание без дополнительной инициализации.

Использование инерции и snap

Для более естественного поведения можно включить инерцию и фиксированные точки привязки (snap):

draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.snap({
      targets: [
        interact.snappers.grid({ x: 50, y: 50 }) // привязка к сетке 50x50
      ],
      range: Infinity,
      relativePoints: [{ x: 0.5, y: 0.5 }]
    })
  ]
});

Эта настройка позволяет элементу “прилипать” к сетке во время перемещения, создавая аккуратный визуальный результат.

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

Оглавление