Настройка внешнего вида

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

Стилизация перетаскиваемых элементов

Перетаскиваемый элемент в Draggable может быть стилизован через стандартные CSS-классы. По умолчанию библиотека добавляет несколько специальных классов в процессе взаимодействия:

  • draggable-source--is-dragging – применяется к элементу в момент начала перетаскивания.
  • draggable-source--is-swapping – активируется, когда элемент обменивается местами с другим.
  • draggable-container--is-over – добавляется к контейнеру, над которым находится перетаскиваемый элемент.

Использование этих классов позволяет задавать эффекты прозрачности, тени, масштабирования и другие визуальные изменения. Пример:

.draggable-source--is-dragging {
  opacity: 0.7;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.draggable-source--is-swapping {
  border: 2px dashed #3498db;
}

.draggable-container--is-over {
  background-color: #f0f8ff;
}

Такая настройка визуально подчёркивает процесс перетаскивания и делает интерфейс более отзывчивым.

Кастомизация зеркала (mirror)

Draggable создает зеркальный элемент (mirror), который следует за курсором во время перетаскивания. Этот элемент можно стилизовать независимо от исходного. Для этого можно использовать событие mirror:created:

const draggable = new Draggable.Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item'
});

draggable.on('mirror:created', ({ mirror }) => {
  mirror.style.backgroundColor = '#ffffff';
  mirror.style.border = '1px solid #3498db';
  mirror.style.borderRadius = '4px';
  mirror.style.boxShadow = '0 12px 24px rgba(0,0,0,0.2)';
});

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

Настройка placeholder

Placeholder – это элемент, который появляется на месте перетаскиваемого объекта, показывая пользователю, куда он может быть помещен. Draggable не создает placeholder по умолчанию, но его легко добавить через событие drag:start:

draggable.on('drag:start', ({ source, container }) => {
  const placeholder = document.createElement('div');
  placeholder.classList.add('draggable-placeholder');
  placeholder.style.height = `${source.offsetHeight}px`;
  container.insertBefore(placeholder, source.nextSibling);
});

CSS для placeholder:

.draggable-placeholder {
  background-color: rgba(52, 152, 219, 0.2);
  border: 2px dashed #3498db;
  transition: all 0.2s ease;
}

Placeholder помогает пользователю видеть точку вставки, повышая удобство перетаскивания.

Использование кастомных классов и атрибутов

Draggable позволяет добавлять кастомные CSS-классы для разных состояний с помощью опций classes. Это особенно полезно для комплексных интерфейсов, где необходимо различать состояния элементов:

const draggable = new Draggable.Draggable(document.querySelectorAll('.draggable-container'), {
  draggable: '.draggable-item',
  classes: {
    dragging: 'custom-dragging',
    mirror: 'custom-mirror'
  }
});

После этого можно определить стили в CSS:

.custom-dragging {
  background-color: #ffeaa7;
  cursor: grabbing;
}

.custom-mirror {
  opacity: 0.9;
  transform: rotate(2deg);
}

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

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

Для плавного перемещения элементов при swap или сортировке используются CSS-переходы и трансформации. Draggable работает в паре с Sortable для анимаций, но даже без сторонних плагинов можно задать эффекты:

.draggable-item {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.draggable-source--is-dragging {
  transition: none;
}

Использование transition: none для перетаскиваемого элемента предотвращает «подергивания» при движении, а плавные переходы для остальных элементов создают естественный визуальный эффект перестановки.

Настройка курсора и взаимодействия

Для улучшения UX можно изменить курсор и визуальные индикаторы на перетаскиваемых элементах:

.draggable-item {
  cursor: grab;
}

.draggable-source--is-dragging {
  cursor: grabbing;
}

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

Интеграция с фреймворками

Draggable легко интегрируется с современными фреймворками (React, Vue, Angular) через работу с DOM-элементами и кастомные события. Стилизация в этом случае остается полностью в рамках CSS/SCSS, что позволяет использовать динамические классы и переменные для более гибкого управления визуальными эффектами.

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

Оглавление