chosenClass и dragClass

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

chosenClass

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

Основные характеристики:

  • Присваивается только элементу, на котором инициировано событие drag.

  • Убирается автоматически, если элемент перестаёт быть выбранным или операция drag отменяется.

  • Позволяет задавать стили через CSS, например:

    • Подсветка границы
    • Изменение фона
    • Добавление тени

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

const sortable = new Sortable(document.getElementById('list'), {
    chosenClass: 'sortable-chosen'
});
.sortable-chosen {
    border: 2px dashed #3498db;
    background-color: #ecf0f1;
}

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

dragClass

dragClass — это класс CSS, который добавляется к элементу в момент его активного перетаскивания. Этот класс остаётся на элементе, пока пользователь перемещает его по списку, и исчезает сразу после завершения операции.

Особенности поведения:

  • Применяется только к элементу, который перемещается в данный момент.
  • Отличие от chosenClass заключается в том, что dragClass активен во время самого движения, а chosenClass — до начала движения.
  • Можно использовать для создания эффекта «плавающего» элемента, например, изменения прозрачности или увеличения масштаба.

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

const sortable = new Sortable(document.getElementById('list'), {
    dragClass: 'sortable-drag'
});
.sortable-drag {
    opacity: 0.7;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Эти стили делают элемент визуально «поднятым» над остальными, создавая эффект перемещения в пространстве.

Совместное использование chosenClass и dragClass

Обычно chosenClass и dragClass используются вместе для более выразительной анимации перетаскивания. chosenClass активен в момент выбора элемента, а затем переключается на dragClass при перемещении. Это создаёт плавный переход от выбора к активному перемещению.

Пример:

const sortable = new Sortable(document.getElementById('list'), {
    chosenClass: 'sortable-chosen',
    dragClass: 'sortable-drag'
});
.sortable-chosen {
    border: 2px dashed #3498db;
    background-color: #ecf0f1;
}

.sortable-drag {
    opacity: 0.7;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

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

Особенности работы в сложных списках

  • Если список имеет вложенные элементы, chosenClass и dragClass применяются только к выбранному элементу, а не к родителям.
  • В связке с animation можно создавать плавные визуальные эффекты при перетаскивании.
  • При использовании multi-drag (выбор нескольких элементов) класс chosenClass может применяться к каждому выделенному элементу, а dragClass — к элементу, инициирующему перемещение всей группы.

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

  1. Для улучшения UX использовать легкую анимацию и прозрачность с dragClass.
  2. chosenClass лучше применять для чёткой визуальной идентификации выбранного элемента, особенно если список длинный.
  3. Для сложных интерфейсов можно комбинировать с CSS-переходами (transition) для плавной смены стилей.
  4. Для единообразного поведения на мобильных устройствах рекомендуется тестировать взаимодействие с сенсорным экраном, так как визуальные эффекты должны быть заметны без задержек.

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

Оглавление