gu-unselectable - блокировка выделения

Библиотека Dragula в JavaScript обеспечивает простую реализацию перетаскивания элементов между контейнерами, однако при работе с перетаскиванием часто возникает проблема нежелательного выделения текста или других элементов во время drag-and-drop. Для решения этой задачи используется специальный CSS-класс gu-unselectable.

Назначение класса gu-unselectable

Класс gu-unselectable применяется к элементам, на которых необходимо запретить выделение текста. Он автоматически добавляется Dragula к перетаскиваемому элементу в момент начала drag-операции и снимается после её завершения. Это предотвращает случайное выделение текста и улучшает UX при интерактивных интерфейсах с drag-and-drop.

Основные свойства и поведение

Класс gu-unselectable определён в стилях Dragula следующим образом:

.gu-unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  • -webkit-user-select: none; — запрет выделения для браузеров на движке WebKit (Chrome, Safari, Edge на Chromium).
  • -moz-user-select: none; — запрет выделения для Firefox.
  • -ms-user-select: none; — запрет выделения для старых версий Internet Explorer и Edge.
  • user-select: none; — стандартное свойство CSS, поддерживаемое современными браузерами.

Использование этого класса гарантирует, что текст внутри элемента не будет случайно выделяться во время перетаскивания, что предотвращает неприятные визуальные эффекты.

Автоматическое управление Dragula

Dragula автоматически добавляет класс gu-unselectable в момент, когда пользователь начинает перетаскивать элемент:

var drake = dragula([container1, container2]);

В процессе drag-and-drop:

  1. При mousedown на элементе Dragula создает клон элемента, который будет перемещаться по экрану.
  2. К оригинальному элементу добавляется класс gu-unselectable.
  3. После завершения перетаскивания (drop или cancel событие) класс автоматически удаляется.

Это позволяет не заботиться о ручной установке стилей для блокировки выделения текста при каждом событии drag.

Использование в пользовательских стилях

Если необходимо расширить поведение gu-unselectable для интерфейса, можно добавить дополнительные CSS-свойства, например:

.gu-unselectable {
    user-select: none;
    cursor: grabbing;
    opacity: 0.9;
}
  • cursor: grabbing; — визуально показывает, что элемент захвачен.
  • opacity: 0.9; — делает перетаскиваемый элемент слегка прозрачным, улучшая визуальное восприятие.

Важно не удалять стандартные свойства user-select: none;, иначе эффект блокировки выделения перестанет работать.

Ограничения и особенности

  • Класс gu-unselectable не влияет на кликабельные элементы внутри контейнера. Ссылки, кнопки и другие интерактивные элементы остаются активными.
  • Для сложных интерфейсов с nested-дивами, если требуется блокировка выделения на всех дочерних элементах, иногда необходимо применять gu-unselectable на внешний контейнер, чтобы избежать проблем с наследованием стилей.
  • В старых браузерах Internet Explorer версии ниже 10 могут потребоваться дополнительные хаки, так как поддержка user-select ограничена.

Пример интеграции с Dragula

<div id="container1">
    <div class="item">Элемент 1</div>
    <div class="item">Элемент 2</div>
</div>
<div id="container2">
    <div class="item">Элемент A</div>
    <div class="item">Элемент B</div>
</div>

<script>
    var container1 = document.getElementById('container1');
    var container2 = document.getElementById('container2');

    var drake = dragula([container1, container2]);

    drake.on('drag', function(el) {
        // el — элемент, который начали перетаскивать
        console.log('Начало перетаскивания:', el);
    });

    drake.on('drop', function(el, target) {
        console.log('Элемент перемещен в контейнер:', target);
    });
</script>

В этом примере Dragula автоматически применяет gu-unselectable к перетаскиваемым элементам, предотвращая выделение текста и улучшая визуальное восприятие перемещения элементов между контейнерами.

Класс gu-unselectable является ключевым механизмом Dragula для управления поведением перетаскивания. Правильное использование этого класса обеспечивает гладкий и профессиональный UX, устраняя случайное выделение текста и создавая аккуратный визуальный эффект во время drag-and-drop.

Оглавление