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

Interact.js предоставляет мощный инструмент для создания интерактивных элементов на веб-странице. Одним из ключевых аспектов работы с библиотекой является возможность динамически изменять поведение элементов в зависимости от условий, таких как положение курсора, состояние элемента или внешние события. Это реализуется через комбинацию событий (drag, resize, drop) и условных проверок в обработчиках.

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        if (event.target.dataset.locked === "true") {
          return; // Блокируем перемещение заблокированного элемента
        }

        const x = (parseFloat(event.target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(event.target.getAttribute('data-y')) || 0) + event.dy;

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

В примере выше логика перемещения элемента зависит от состояния locked, хранящегося в data-атрибуте. Использование таких условий позволяет создавать более гибкие и управляемые интерфейсы.

Комбинирование событий с условиями

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

interact('.resizable-draggable')
  .draggable({
    listeners: {
      move(event) {
        if (!event.shiftKey) {
          dragMoveListener(event);
        }
      }
    }
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move(event) {
        if (event.shiftKey) {
          resizeMoveListener(event);
        }
      }
    }
  });

Здесь Shift-клавиша служит условием переключения между перетаскиванием и изменением размера. Такой подход позволяет одной и той же интерактивной области выполнять разные функции без конфликтов.

Условные ограничения на движение и размеры

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

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

Условная логика может быть встроена в эти модификаторы через функции, возвращающие динамические значения:

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: function (target, element, interactable, rect) {
          if (target.dataset.type === 'special') {
            return { top: 0, left: 0, bottom: 400, right: 400 };
          }
          return { top: 0, left: 0, bottom: 800, right: 800 };
        }
      })
    ]
  });

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

Динамическая активация и деактивация интерактивности

Interact.js позволяет включать и отключать интерактивность на лету с помощью методов interactable.draggable(false) или interactable.resizable(false). Это особенно удобно для реализации условных сценариев:

const element = document.querySelector('.draggable');
const interactable = interact(element).draggable(true);

element.addEventListener('mouseenter', () => {
  if (element.dataset.active === 'true') {
    interactable.draggable(true); // Включаем перетаскивание
  } else {
    interactable.draggable(false); // Отключаем
  }
});

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

Условная логика в событиях drop

Drop-интерактивность в Interact.js также часто требует условий. Можно проверять совпадение классов, идентификаторов или состояния элементов:

interact('.dropzone').dropzone({
  ondrop(event) {
    const draggable = event.relatedTarget;
    if (draggable.dataset.accept === 'true') {
      event.target.appendChild(draggable);
    } else {
      draggable.style.transform = 'translate(0,0)';
    }
  }
});

Проверка dataset.accept позволяет разрешать сброс только для определённых элементов, реализуя условную логику поведения drop-зоны.

Использование кастомных условий с Interact.js

Для сложных интерфейсов можно использовать пользовательские функции проверки, которые объединяют несколько факторов: положение, состояние, размер и события клавиатуры. Например, можно разрешить перемещение только внутри определённой области при зажатой клавише Ctrl:

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        const rect = event.target.getBoundingClientRect();
        if (event.ctrlKey && rect.top >= 0 && rect.left >= 0) {
          dragMoveListener(event);
        }
      }
    }
  });

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

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

Interact.js можно комбинировать с фреймворками вроде React, Vue или Svelte, применяя условную логику на основе состояния компонента. Например, в React состояние isLocked может управлять доступностью перетаскивания:

<Draggable
  disabled={isLocked}
  onD rag={(e) => {
    if (!isLocked) updatePosition(e);
  }}
/>

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

Практические рекомендации по условной логике

  • Для проверки состояний используйте data-атрибуты или внутренние свойства элементов.
  • Ограничения движения и размера лучше задавать через модификаторы с функциями, а не статические значения.
  • Для динамического включения/отключения интерактивности применяйте методы .draggable(), .resizable(), .dropzone().
  • В событиях проверяйте несколько условий одновременно, объединяя клавиатурные события, состояние элементов и геометрию.
  • Разделяйте логику обработки drag, resize и drop, чтобы условные проверки не пересекались и не создавали конфликты.

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

Оглавление