Курсоры и указатели

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

Настройка курсора

По умолчанию при начале перетаскивания курсор браузера меняется на стандартный «хватательный» вид, что может не всегда соответствовать дизайну приложения. SortableJS позволяет изменять вид курсора через CSS:

.dragging {
    cursor: grabbing;
}

В JavaScript можно динамически добавлять класс к элементу при начале перетаскивания:

new Sortable(document.getElementById('list'), {
    onStart: function (evt) {
        evt.item.classList.add('dragging');
    },
    onEnd: function (evt) {
        evt.item.classList.remove('dragging');
    }
});

Ключевой момент: изменение класса элемента при onStart и onEnd обеспечивает плавное переключение курсора и визуальную обратную связь пользователю.

Использование свойства forceFallback

По умолчанию SortableJS использует нативный HTML5 drag-and-drop. При этом браузер сам управляет курсором и элементом-призраком. Свойство forceFallback: true позволяет полностью контролировать курсор и визуальное поведение перетаскиваемого элемента:

new Sortable(document.getElementById('list'), {
    forceFallback: true,
    fallbackClass: 'dragging',
});

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

Настройка кастомного указателя

Кастомные указатели улучшают визуальное восприятие перетаскивания, особенно при работе с множеством элементов разных типов. Можно создать отдельный DOM-элемент, который будет следовать за курсором:

const ghost = document.createElement('div');
ghost.className = 'custom-ghost';
document.body.appendChild(ghost);

new Sortable(document.getElementById('list'), {
    forceFallback: true,
    onStart: function (evt) {
        ghost.textContent = evt.item.textContent;
        ghost.style.display = 'block';
    },
    onMove: function (evt) {
        ghost.style.top = evt.originalEvent.clientY + 'px';
        ghost.style.left = evt.originalEvent.clientX + 'px';
    },
    onEnd: function (evt) {
        ghost.style.display = 'none';
    }
});

Примечание: при использовании кастомного указателя важно синхронизировать его позицию с курсором через clientX и clientY, чтобы движение выглядело естественно.

Управление стилями элементов при наведении

SortableJS предоставляет события onChoose и onUnchoose для обработки элементов, выбранных для перетаскивания:

new Sortable(document.getElementById('list'), {
    onChoose: function (evt) {
        evt.item.style.border = '2px dashed #000';
    },
    onUnchoose: function (evt) {
        evt.item.style.border = '';
    }
});

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

Обработка мобильных устройств и touch-указателей

На сенсорных устройствах управление курсором заменяется касанием. SortableJS автоматически поддерживает touch-события, но для кастомного поведения полезно использовать fallbackOnBody и scroll:

new Sortable(document.getElementById('list'), {
    forceFallback: true,
    fallbackOnBody: true,
    scroll: true,
});
  • fallbackOnBody гарантирует, что «призрачный» элемент создаётся в body, предотвращая проблемы с позиционированием на маленьких экранах.
  • scroll позволяет списку прокручиваться при перетаскивании к краю контейнера, сохраняя контроль над курсором.

Плавное перемещение указателя

Для улучшения UX можно добавлять CSS-анимацию к перетаскиваемому элементу или кастомному «призраку»:

.custom-ghost {
    transition: transform 0.1s ease;
    pointer-events: none;
    position: fixed;
    z-index: 1000;
}

Использование pointer-events: none предотвращает случайные взаимодействия с элементом-призраком, а transition делает движение более плавным.

Резюме ключевых свойств и методов

  • forceFallback — включает полный контроль над курсором и элементом-призраком.
  • fallbackClass — CSS-класс для элемента при fallback.
  • onStart, onEnd, onMove — события для управления классами, курсором и кастомным указателем.
  • onChoose, onUnchoose — визуальное выделение выбранных элементов.
  • fallbackOnBody и scroll — оптимизация для мобильных устройств.

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

Оглавление