Визуальная обратная связь

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

Псевдоэлементы и визуальные индикаторы

SortableJS использует CSS-классы для управления визуальной обратной связью:

  • ghostClass — класс, который применяется к элементу-призраку, создаваемому на время перетаскивания. Этот элемент визуально повторяет перетаскиваемый и позволяет видеть его форму, пока оригинальный элемент остается на месте.

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

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

Пример конфигурации:

Sortable.create(document.getElementById('items'), {
  ghostClass: 'sortable-ghost',
  chosenClass: 'sortable-chosen',
  dragClass: 'sortable-drag'
});

В CSS это может быть оформлено так:

.sortable-ghost {
  opacity: 0.4;
  border: 1px dashed #999;
}

.sortable-chosen {
  background-color: #f0f0f0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.sortable-drag {
  transform: scale(1.05);
}

Контроль позиции через placeholder

Элемент placeholder создается автоматически, чтобы показать, где будет размещен перетаскиваемый элемент при отпускании. Его стиль можно полностью кастомизировать через параметр setData и CSS:

Sortable.create(document.getElementById('items'), {
  ghostClass: 'sortable-ghost',
  chosenClass: 'sortable-chosen',
  dragClass: 'sortable-drag',
  animation: 150,
  onStart: function (evt) {
    evt.item.style.background = '#ffeeba';
  },
  onEnd: function (evt) {
    evt.item.style.background = '';
  }
});

CSS для placeholder может выглядеть так:

.sortable-placeholder {
  background-color: #d3d3d3;
  border: 2px dashed #666;
  min-height: 40px;
  margin-bottom: 5px;
}

Анимация перемещения элементов

SortableJS поддерживает анимацию перестановки элементов через параметр animation. Это повышает визуальную обратную связь, делая перемещение элементов плавным и наглядным:

Sortable.create(document.getElementById('items'), {
  animation: 200,
});

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

Колоризация и динамическая подсветка

Для усиления визуальной обратной связи можно изменять цвет или стиль соседних элементов, на которые перетаскивается объект:

Sortable.create(document.getElementById('items'), {
  onMove: function (evt) {
    const target = evt.related;
    target.style.borderTop = '2px solid #007bff';
    setTimeout(() => target.style.borderTop = '', 100);
    return true;
  }
});

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

Поддержка нескольких списков

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

Sortable.create(document.getElementById('list1'), {
  group: 'shared',
  ghostClass: 'sortable-ghost'
});

Sortable.create(document.getElementById('list2'), {
  group: 'shared',
  ghostClass: 'sortable-ghost'
});

Классы ghost и chosen применяются отдельно для каждого списка, позволяя пользователю видеть источник и цель перемещения. Placeholder автоматически адаптируется под ширину и высоту списка, улучшая восприятие.

Настройка событий для улучшенной обратной связи

SortableJS предоставляет набор событий для тонкой настройки визуальных эффектов:

  • onChoose — срабатывает при выборе элемента.
  • onStart — начало перемещения.
  • onEnd — завершение перемещения.
  • onAdd — элемент добавлен в новый список.
  • onUpdate — элемент перемещен внутри списка.
  • onRemove — элемент удален из текущего списка.

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

Sortable.create(document.getElementById('items'), {
  onChoose: evt => evt.item.style.background = '#cce5ff',
  onEnd: evt => evt.item.style.background = ''
});

Сочетание с другими визуальными эффектами

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

Эти инструменты делают SortableJS мощным инструментом для создания гибких и визуально наглядных списков с drag-and-drop функциональностью.

Оглавление