Валидация перемещений

SortableJS — мощная библиотека для реализации интерактивной сортировки элементов на странице. Одной из ключевых возможностей является контроль над перемещениями элементов. Валидация перемещений позволяет ограничивать перемещения по определённым правилам, предотвращать нежелательные изменения порядка и управлять логикой перетаскивания на лету.

Ограничение допустимых перемещений

Основной инструмент для валидации перемещений — событие onMove. Оно вызывается каждый раз при попытке переместить элемент в новую позицию. Событие позволяет определить, разрешить или запретить перемещение, возвращая true для разрешения и false для запрета.

Пример базовой настройки:

const sortable = new Sortable(list, {
  onMove: function (evt, originalEvent) {
    // evt.related - элемент, перед которым планируется вставка
    // evt.dragged - перемещаемый элемент
    // запретить перемещение элементов с классом "locked"
    return !evt.dragged.classList.contains('locked');
  }
});

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

  • evt.dragged — элемент, который перемещается.
  • evt.related — элемент, перед которым планируется вставка.
  • evt.willInsertAfter — булевое значение, указывающее, будет ли вставка после related.
  • Возвращаемое значение true/false определяет возможность перемещения.

Группы и их ограничения

SortableJS позволяет создавать группы, управлять переносом элементов между ними и задавать правила валидации для этих операций. Свойство group содержит несколько важных параметров:

  • name — имя группы.
  • pull — управляет возможностью перемещения элемента из этой группы. Может быть true, false, "clone" или функция для динамической проверки.
  • put — управляет возможностью вставки элемента в группу. Может быть true, false или функция.

Пример ограничения вставки только определённых элементов:

const sortableA = new Sortable(listA, {
  group: {
    name: 'shared',
    pull: true,
    put: function (to, from, dragged) {
      // Разрешить вставку только элементов с классом "allowed"
      return dragged.classList.contains('allowed');
    }
  }
});

const sortableB = new Sortable(listB, {
  group: 'shared'
});

Особенности функций put и pull:

  • dragged — элемент, который перемещается.
  • from — исходный список.
  • to — целевой список.
  • Возвращаемое значение true/false контролирует возможность перемещения.

Применение динамических правил

Валидация перемещений может зависеть от состояния страницы, пользовательских условий или данных, связанных с элементами. Например, можно запрещать перемещение элементов на нечётные позиции или в зависимости от атрибутов:

onMove: function(evt) {
  const index = Array.from(evt.from.children).indexOf(evt.related);
  const canMove = index % 2 === 0; // разрешаем вставку только на чётные позиции
  return canMove;
}

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

Валидация с асинхронной проверкой

SortableJS поддерживает использование функций в onMove и put, которые могут возвращать результат после выполнения асинхронных операций, например, проверки на сервере. Для этого можно использовать промисы:

onMove: function(evt) {
  return fetch('/api/check-move', {
    method: 'POST',
    body: JSON.stringify({
      draggedId: evt.dragged.dataset.id,
      targetId: evt.related.dataset.id
    }),
    headers: {'Content-Type': 'application/json'}
  })
  .then(response => response.json())
  .then(data => data.canMove);
}

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

Контроль визуальных эффектов при запрете перемещения

При запрете перемещения через onMove или put важно правильно управлять визуальными эффектами. Для этого можно использовать CSS-классы и события библиотеки:

onMove: function(evt) {
  const canMove = !evt.dragged.classList.contains('locked');
  evt.related.classList.toggle('highlight-denied', !canMove);
  return canMove;
}

Рекомендации по UX:

  • Добавлять визуальные подсказки для запрещённых перемещений.
  • Не блокировать полностью действия пользователя без обратной связи.
  • Использовать прозрачные и предсказуемые правила перемещения.

Итоговое управление валидацией

Совмещение onMove, групп, put и pull позволяет строить сложные сценарии:

  • Запрет перемещения отдельных элементов.
  • Ограничение перемещений между списками.
  • Динамическая валидация на основе атрибутов или данных.
  • Асинхронная проверка перемещений.
  • Управление визуальными эффектами для запрещённых действий.

Эта гибкость делает SortableJS универсальным инструментом для реализации интерактивных и безопасных интерфейсов сортировки.

Оглавление