Работа с ghostClass

ghostClass — это опция в библиотеке SortableJS, которая позволяет задавать CSS-класс для элемента, который перемещается в процессе drag-and-drop. Этот класс применяется к прототипу перетаскиваемого элемента, когда он находится в состоянии “призрачного” объекта, то есть видимого при перетаскивании, но не влияющего на структуру DOM до завершения операции.

Синтаксис и настройка

ghostClass задается при инициализации экземпляра Sortable через объект опций:

const sortable = new Sortable(listElement, {
    ghostClass: 'sortable-ghost'
});
  • ghostClass — строка, содержащая имя CSS-класса.
  • Элемент с этим классом получает стили только на время перетаскивания.
  • После завершения перетаскивания класс автоматически удаляется.

Применение CSS для ghostClass

CSS-класс для ghost-элемента может включать визуальные эффекты, которые делают процесс перетаскивания более наглядным. Например:

.sortable-ghost {
    opacity: 0.5;
    border: 2px dashed #007bff;
    background-color: #f0f8ff;
}

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

  • opacity позволяет выделить движущийся элемент на фоне остальных.
  • border создаёт контур, показывающий область, которую займёт элемент.
  • background-color улучшает визуальное восприятие.

Поведение ghost-элемента

Ghost-элемент создается клонированием оригинального DOM-элемента. При этом:

  • Клон не является частью списка до завершения операции.
  • Ghost-элемент повторяет все размеры и стили исходного элемента (если не переопределены через CSS).
  • Взаимодействие пользователя с ghost-элементом ограничено визуальным восприятием; он не принимает события клика или фокуса.

Сочетание с другими опциями SortableJS

ghostClass часто используется вместе с:

  • animation — плавное перемещение элементов при сортировке:
const sortable = new Sortable(listElement, {
    animation: 150,
    ghostClass: 'sortable-ghost'
});
  • chosenClass — класс, применяемый к элементу в момент выбора (до начала drag):
const sortable = new Sortable(listElement, {
    chosenClass: 'sortable-chosen',
    ghostClass: 'sortable-ghost'
});

Отличие ghostClass от chosenClass:

  • chosenClass активен только при начале перетаскивания и исчезает сразу, как элемент начинает двигаться.
  • ghostClass отображает элемент во время движения, пока drag не завершен.

Динамическое управление ghostClass

Можно изменять поведение ghost-элемента на лету через события SortableJS:

const sortable = new Sortable(listElement, {
    ghostClass: 'sortable-ghost',
    onStart: function (evt) {
        evt.item.classList.add('dragging');
    },
    onEnd: function (evt) {
        evt.item.classList.remove('dragging');
    }
});
  • onStart вызывается при начале перетаскивания.
  • onEnd — по завершении drag-and-drop.
  • Ghost-элемент сохраняет класс ghostClass только на период перемещения.

Советы по использованию

  1. Контрастность: ghost-элемент должен быть визуально отличим от остальных элементов списка.
  2. Стабильность размеров: убедиться, что ghost-элемент сохраняет размеры оригинала, чтобы не нарушать восприятие списка.
  3. Минимизация анимаций: при сложных списках анимации и прозрачность могут снижать производительность, поэтому стоит тестировать на реальных данных.
  4. Сочетание с CSS-переходами: для плавного эффекта можно использовать transition на свойствах, изменяемых ghostClass.

Расширенные возможности

Ghost-элемент можно кастомизировать через JavaScript, создавая уникальные визуальные эффекты:

const sortable = new Sortable(listElement, {
    ghostClass: 'sortable-ghost',
    onMove: function (evt, originalEvent) {
        const ghost = document.querySelector('.sortable-ghost');
        ghost.style.transform = 'rotate(5deg) scale(1.05)';
    }
});
  • onMove срабатывает при каждом перемещении элемента.
  • Можно изменять стили ghost-элемента динамически, добавлять тени, вращение, масштабирование.

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

Оглавление