handle и filter

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

Параметр handle

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

Пример использования:

new Sortable(document.getElementById('list'), {
  handle: '.drag-handle',
  animation: 150
});

В этом примере перемещать элементы списка можно только за область с классом .drag-handle. Если кликнуть по другой части элемента, сортировка не произойдёт.

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

  • handle может быть CSS-селектором, указывающим на один или несколько элементов внутри перетаскиваемого узла.
  • При наличии handle клики по остальной части элемента игнорируются для начала сортировки.
  • Поддерживаются вложенные элементы, что позволяет создавать сложные интерфейсы с несколькими зонами захвата.

Пример с вложенными элементами:

<ul id="list">
  <li>
    <span class="drag-handle">≡</span>
    <span class="title">Элемент 1</span>
  </li>
  <li>
    <span class="drag-handle">≡</span>
    <span class="title">Элемент 2</span>
  </li>
</ul>
Sortable.create(document.getElementById('list'), {
  handle: '.drag-handle',
  animation: 200
});

В этом случае сортировка возможна только через символ «≡», а клик по тексту элемента не инициирует перемещение.

Параметр filter

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

Пример базового использования:

Sortable.create(document.getElementById('list'), {
  filter: '.no-drag',
  animation: 150
});

Элементы с классом .no-drag не будут участвовать в сортировке. Клик и попытка перетаскивания на таких элементах игнорируются.

Комбинированное использование с handle:

handle и filter можно использовать одновременно для достижения максимальной точности управления:

Sortable.create(document.getElementById('list'), {
  handle: '.drag-handle',
  filter: '.no-drag',
  animation: 150
});
  • .drag-handle определяет область захвата для перемещения.
  • .no-drag блокирует сортировку на определённых элементах даже внутри handle-зоны.

Функции обратного вызова для фильтров

filter может принимать не только CSS-селектор, но и функцию, возвращающую true или false. Это позволяет реализовать сложные правила блокировки:

Sortable.create(document.getElementById('list'), {
  filter: function (event, target) {
    return target.classList.contains('disabled') || target.tagName === 'BUTTON';
  }
});

В этом примере сортировка запрещена для элементов с классом .disabled и для всех кнопок, находящихся внутри списка.

Особенности работы с событиями:

  • Событие onMove позволяет дополнительно управлять возможностью перетаскивания элементов в момент движения.
  • Метод event.preventDefault() можно использовать для динамического блокирования сортировки на основе состояния приложения.

Рекомендации по использованию

  • Использовать handle при наличии интерактивных элементов, чтобы избежать конфликтов между кликами и перетаскиванием.
  • Применять filter для защиты функциональных элементов, таких как кнопки удаления, чекбоксы или ссылки.
  • Совмещать оба параметра для сложных интерфейсов, где необходимо точное управление взаимодействием пользователя с элементами списка.
  • Для динамически изменяемых списков пересоздавать или обновлять Sortable с новыми селекторами handle и filter.

Практические сценарии

  1. Список задач с кнопками управления Кнопки «удалить» или «редактировать» не должны инициировать сортировку, а перетаскивание возможно только за иконку «≡».

  2. Таблицы с перемещаемыми строками В таблице handle может быть маленькой иконкой, filter — кнопками внутри ячеек для действий.

  3. Карточки Kanban Каждый блок карточки можно перетаскивать за шапку, а внутри карточки элементы управления фильтруются через filter.

Использование handle и filter позволяет создавать интерфейсы с точной интерактивностью, предотвращая случайные перетаскивания и повышая удобство работы с элементами списка в веб-приложениях. Эти параметры делают SortableJS гибким инструментом для сложных интерфейсов с большим количеством интерактивных компонентов.

Оглавление