Отмена и предотвращение действий

Библиотека Interact.js предоставляет мощные средства для работы с интерактивными элементами: перетаскивание, изменение размера и жесты. Контроль над тем, когда действие должно быть выполнено или отменено, играет ключевую роль в построении предсказуемого и корректного интерфейса. Механизмы отмены действий позволяют предотвратить нежелательные события, улучшить UX и защитить данные.

Использование метода interactable.preventDefault

Метод preventDefault применяется для предотвращения стандартного поведения браузера при определённых событиях. В контексте Interact.js это особенно актуально при перетаскивании элементов:

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        event.preventDefault(); // предотвращает стандартное поведение браузера
      }
    }
  });

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

  • preventDefault нужно вызывать внутри слушателя события.
  • Предотвращает стандартные действия, такие как выделение текста при drag.
  • Обеспечивает корректную работу кастомных обработчиков Interact.js.

Отмена действия с помощью события beforestart

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

interact('.draggable')
  .draggable({
    listeners: {
      beforestart(event) {
        if (!event.target.classList.contains('allowed')) {
          return false; // отменяет перетаскивание
        }
      }
    }
  });

Особенности использования:

  • Возврат false в beforestart полностью предотвращает запуск действия.
  • Можно использовать любые логические условия: атрибуты, состояние DOM, пользовательские флаги.
  • Позволяет создавать «защищённые зоны», где действия недоступны.

Предотвращение действий с помощью interactable.checkAction

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

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      start(event) {
        const action = event.interaction.prepared.name;
        if (action === 'resize' && event.rect.width < 100) {
          event.interaction.stop(); // останавливает текущее действие
        }
      }
    }
  });

Пояснения:

  • interaction.prepared.name возвращает текущее действие (drag, resize и т.д.).
  • Метод stop() полностью прекращает текущее действие.
  • Можно использовать для динамического ограничения размеров, направлений или других параметров.

Ограничение действий через interactable.ignoreFrom и interactable.allowFrom

Для предотвращения запуска действий на определённых элементах или областях существуют параметры:

interact('.draggable')
  .draggable({
    ignoreFrom: '.no-drag',
    allowFrom: '.handle'
  });

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

  • ignoreFrom — селектор элементов, на которых действие не будет инициировано.
  • allowFrom — селектор элементов, с которых допустимо инициировать действие.
  • Совместное использование позволяет тонко настраивать интерактивность элементов.

Прерывание действия через interaction.stop()

Метод interaction.stop() позволяет остановить уже начатое действие. Это особенно полезно при динамических проверках во время выполнения перетаскивания или ресайза:

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        if (event.client.x > 500) {
          event.interaction.stop(); // останавливает перетаскивание при достижении границы
        }
      }
    }
  });

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

  • Прерывает текущее действие сразу, не ожидая завершения.
  • Можно использовать для динамических ограничений по координатам, состоянию приложения или внешним условиям.
  • Позволяет комбинировать с другими проверками (beforestart, checkAction) для комплексного контроля.

Примеры комплексного предотвращения действий

  1. Ограничение зоны перетаскивания и исключение некоторых элементов:
interact('.draggable')
  .draggable({
    allowFrom: '.handle',
    ignoreFrom: '.no-drag',
    listeners: {
      beforestart(event) {
        if (event.client.x < 50) return false;
      },
      move(event) {
        if (event.client.x > 500) event.interaction.stop();
      }
    }
  });
  1. Запрет ресайза ниже минимального размера и только для определённых краёв:
interact('.resizable')
  .resizable({
    edges: { left: true, right: true },
    listeners: {
      start(event) {
        if (event.rect.width < 100) event.interaction.stop();
      }
    }
  });

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

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

Оглавление