Валидация входных данных

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

Метод interactable.draggable() и функции валидации

Для перетаскиваемых объектов в Interact.js используется метод:

interact(element).draggable({
    listeners: { move: dragMoveListener },
    modifiers: [],
    restrict: {},
    inertia: true
});

Использование modifiers

Modifiers — это набор правил, которые применяются к объекту при его перемещении. Среди них есть важные инструменты для валидации:

  • restrictRect — ограничение перемещения объекта в заданной области.
  • restrictEdges — ограничение срабатывает только на границах контейнера.
  • restrictSize — ограничение минимального и максимального размера при масштабировании.

Пример ограничения перемещения элемента внутри контейнера:

interact('.draggable').draggable({
    modifiers: [
        interact.modifiers.restrictRect({
            restriction: 'parent',
            endOnly: true
        })
    ]
});

Здесь restriction: 'parent' гарантирует, что элемент не выйдет за границы родителя, а endOnly: true применяет проверку только после завершения перетаскивания, минимизируя нагрузку на интерфейс.

Callback для валидации: interactable.on('before-start')

Для более сложных условий допуска к взаимодействию используется событие before-start, которое позволяет отменить или разрешить действие:

interact('.draggable').on('before-start', function(event) {
    if (!event.target.classList.contains('active')) {
        return false; // запрещает старт перетаскивания
    }
});
  • Возвращение false блокирует начало действия.
  • Можно использовать любые условия: проверка состояния элемента, пользовательских данных или внешних ограничений.

Валидация координат и границ

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

interact('.draggable').draggable({
    modifiers: [
        interact.modifiers.snap({
            targets: [ { x: 100, y: 100 }, { x: 200, y: 200 } ],
            range: 20,
            relativePoints: [ { x: 0, y: 0 } ]
        })
    ]
});
  • targets задаёт допустимые точки привязки.
  • range определяет радиус, в пределах которого объект «притягивается» к цели.
  • relativePoints позволяет привязывать не центр, а любую точку элемента.

Таким образом, библиотека позволяет точно контролировать допустимые координаты объекта, предотвращая ошибки и некорректное позиционирование.

Валидация размеров при масштабировании

Для элементов, поддерживающих масштабирование (resizable), валидация размеров реализуется через restrictSize:

interact('.resizable').resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
        interact.modifiers.restrictSize({
            min: { width: 50, height: 50 },
            max: { width: 300, height: 300 }
        })
    ],
    inertia: true
});
  • min и max задают диапазон допустимых размеров.
  • Это предотвращает растягивание элемента до нечитабельных или некорректных значений.
  • В комбинации с событиями resizemove можно динамически проверять условия и корректировать размеры в реальном времени.

Пользовательская валидация через modifiers с функцией set

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

interact('.draggable').draggable({
    modifiers: [
        {
            // кастомная функция ограничения координат
            start: function (interaction) {},
            set: function (coords, interaction) {
                if (coords.x < 0) coords.x = 0;
                if (coords.y < 0) coords.y = 0;
                return coords;
            }
        }
    ]
});
  • Функция set получает текущие координаты и должна возвращать новые.
  • Позволяет реализовать любые логические проверки: сетки, зоны, динамическое ограничение по состоянию других элементов.

Валидация через события dragmove и resizemove

Для сложных сценариев контроля можно проверять координаты и размеры на каждом шаге движения:

interact('.draggable').draggable({
    listeners: {
        move: function(event) {
            let x = event.pageX;
            let y = event.pageY;
            if (x < 50) x = 50;
            if (y < 50) y = 50;
            event.target.style.transform = `translate(${x}px, ${y}px)`;
        }
    }
});
  • Позволяет реализовать динамическую валидацию на лету.
  • Можно контролировать столкновения с другими элементами, зоны запрета и прочие логические условия.

Практические рекомендации

  1. Комбинировать встроенные и кастомные модификаторы — это позволяет гибко контролировать движение и размеры объектов.
  2. Использовать before-start для блокировки действий до проверки условий.
  3. Применять snap и restrictRect для визуальной интуитивной корректности взаимодействия.
  4. Обрабатывать события move и resizemove для динамических проверок, особенно при сложных интерфейсах с множественными зависимостями.
  5. Оптимизировать проверку условий — лишние вычисления в каждом кадре могут замедлять интерфейс.

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

Оглавление