ignoreInputTextSelection - игнорирование текста

Dragula — это библиотека для организации drag-and-drop интерфейсов в веб-приложениях на JavaScript. Одной из важных проблем при перетаскивании элементов является непреднамеренное выделение текста в процессе движения объекта. Для решения этой задачи в Dragula предусмотрена опция ignoreInputTextSelection.

Опция ignoreInputTextSelection

Назначение: предотвращает конфликт между выделением текста и функционалом перетаскивания. Без этой настройки браузер может воспринимать попытку перетащить элемент как выделение текста внутри него, особенно если элемент содержит <input>, <textarea> или редактируемый текст (contenteditable).

Тип значения: Boolean Значение по умолчанию: true

Когда опция установлена в true, Dragula игнорирует события, происходящие на элементах, где пользователь может вводить текст или выделять его. Это делает взаимодействие более плавным и предотвращает случайные срабатывания drag-and-drop.

const drake = dragula({
    containers: [container1, container2],
    ignoreInputTextSelection: true
});

В данном примере элементы внутри container1 и container2 можно перетаскивать, но если пользователь выделяет текст в <input> или <textarea>, Dragula не начнет перенос элемента.

Поведение при отключении опции

Если установить ignoreInputTextSelection: false, библиотека будет реагировать на все события мыши, независимо от того, где они произошли:

const drake = dragula({
    containers: [container1],
    ignoreInputTextSelection: false
});

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

Влияние на обработку событий

Dragula использует события mousedown, mousemove и mouseup для определения начала и завершения перетаскивания. Опция ignoreInputTextSelection добавляет дополнительную проверку:

  1. Определяется целевой элемент события (event.target).
  2. Если элемент является <input>, <textarea> или имеет атрибут contenteditable, drag-and-drop игнорируется.
  3. Все остальные элементы обрабатываются стандартным образом.

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

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

  • Формы и поля ввода: всегда оставлять ignoreInputTextSelection: true, чтобы пользователи могли вводить и редактировать текст без случайного перемещения элементов.
  • Списки и карточки без редактируемого текста: можно отключать опцию, если требуется перетаскивать элементы с текстом без ограничений.
  • Совмещение с другими событиями: при использовании drag и drop событий стоит учитывать, что игнорирование текстовых полей также предотвращает случайные срабатывания событий на этих полях.

Пример использования с несколькими контейнерами и текстовыми полями

const containers = [document.getElementById('todo-list'), document.getElementById('done-list')];

const drake = dragula(containers, {
    ignoreInputTextSelection: true
});

drake.on('drag', (el) => {
    el.style.opacity = '0.5';
});

drake.on('drop', (el, target) => {
    el.style.opacity = '1';
});

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

Заключение по функционалу

Опция ignoreInputTextSelection является ключевым инструментом для обеспечения удобного взаимодействия с элементами, содержащими текст. Она позволяет избежать конфликтов между стандартным выделением текста и drag-and-drop интерфейсом, сохраняя пользовательский опыт плавным и предсказуемым.

Настройка этой опции должна учитывать тип контента внутри контейнеров и предполагаемое поведение пользователей.

Оглавление