draggable и ghostClass

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

Параметр draggable

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

Синтаксис:

draggable: '.className'

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

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

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

new Sortable(document.getElementById('list'), {
    draggable: 'li.item'
});

В этом примере только

  • элементы с классом item будут перетаскиваемыми. Элементы без этого класса останутся статичными.

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

    • Если draggable не указан, по умолчанию все дочерние элементы контейнера становятся перетаскиваемыми.
    • Можно комбинировать с параметрами handle для задания зоны захвата, чтобы элемент был перетаскиваемым только за определённую область.
    new Sortable(list, {
    draggable: 'li',
    handle: '.handle'
});

    Здесь

  • элементы можно двигать только за элементы с классом .handle.

    Параметр ghostClass

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

    Синтаксис:

    ghostClass: 'custom-ghost'

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

    • ghostClass применяет указанный CSS-класс к копии элемента, которая следует за курсором.
    • Это позволяет визуально отделять элемент, который перетаскивается, от остальных элементов.
    • Класс исчезает автоматически, когда перетаскивание завершено или элемент сброшен в новую позицию.

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

    new Sortable(list, {
    draggable: 'li',
    ghostClass: 'ghost'
});
    .ghost {
    opacity: 0.5;
    border: 2px dashed #999;
    background-color: #f0f0f0;
}

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

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

    • ghostClass не изменяет сам оригинальный элемент, а только его визуальное представление в процессе drag-and-drop.
    • Можно динамически менять стиль через JavaScript, модифицируя класс или добавляя дополнительные анимации через CSS.
    • Работает совместно с параметрами chosenClass и dragClass, которые выделяют выбранный элемент или сам объект во время перетаскивания.

    Взаимодействие draggable и ghostClass

    Эти два параметра тесно связаны: draggable определяет, что может быть перетащено, а ghostClass — как это перетаскивание визуализируется.

    Пример комплексной настройки:

    new Sortable(document.getElementById('tasks'), {
    draggable: '.task',
    ghostClass: 'dragging',
    handle: '.task-handle'
});
    • Только элементы с классом .task перетаскиваемы.
    • Перетаскиваемый элемент при движении получает класс .dragging, применяя к нему полупрозрачность и рамку.
    • Перемещать элемент можно только за элемент .task-handle.

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

    • Для списков с большим количеством элементов рекомендуется явно указывать селектор в draggable, чтобы избежать случайного перетаскивания контейнеров или вложенных элементов.
    • ghostClass следует использовать для улучшения UX, особенно если перетаскивание затрагивает важные данные.
    • Для анимации изменения положения элементов можно использовать CSS-переходы вместе с ghostClass, чтобы движение выглядело плавным.

    Дополнительные возможности

    1. Множественные контейнеры: можно объединять списки и перемещать элементы между ними, сохраняя draggable и ghostClass для каждого.
    2. События: onStart, onEnd, onAdd, onUpdate позволяют выполнять кастомные действия при начале, окончании или перемещении элементов.
    3. Совместимость с мобильными устройствами: библиотека поддерживает касание и drag-and-drop на сенсорных экранах, при этом ghostClass корректно отображает элемент даже при тач-событиях.
    • Оглавление