Галерея изображений

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

const gallery = document.getElementById('gallery');
const sortable = new Sortable(gallery, {
    animation: 150,
    ghostClass: 'dragging'
});

Ключевые параметры:

  • animation — длительность анимации перемещения элементов (в миллисекундах).
  • ghostClass — CSS-класс для элемента, который перемещается (отображается полупрозрачным).
  • handle — селектор, указывающий, за какую часть элемента можно перетаскивать.
  • draggable — селектор элементов внутри контейнера, которые можно перетаскивать.

Создание галереи изображений

Для галереи используется список элементов <ul> или <div>, где каждый элемент содержит изображение и, при необходимости, подпись. Важным аспектом является определение класса для перетаскиваемых элементов.

<div id="gallery">
    <div class="item"><img src="img1.jpg" alt="1"></div>
    <div class="item"><img src="img2.jpg" alt="2"></div>
    <div class="item"><img src="img3.jpg" alt="3"></div>
</div>
const gallery = document.getElementById('gallery');
new Sortable(gallery, {
    animation: 200,
    draggable: '.item',
    handle: 'img',
    chosenClass: 'selected',
    ghostClass: 'dragging'
});

Описание параметров:

  • chosenClass — CSS-класс для элемента, который выбран и готов к перемещению.
  • handle в примере установлен на <img>, что позволяет перетаскивать только по изображению.

Работа с событиями

SortableJS предоставляет множество событий для контроля за процессом перетаскивания:

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

Пример логирования нового порядка изображений:

const sortable = new Sortable(gallery, {
    animation: 150,
    draggable: '.item',
    onEnd: function (evt) {
        const order = Array.from(gallery.children).map(item => item.querySelector('img').alt);
        console.log('Новый порядок:', order);
    }
});

Множественные контейнеры

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

const gallery1 = document.getElementById('gallery1');
const gallery2 = document.getElementById('gallery2');

new Sortable(gallery1, { group: 'shared', animation: 150, draggable: '.item' });
new Sortable(gallery2, { group: 'shared', animation: 150, draggable: '.item' });

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

  • Строковое значение идентифицирует группу контейнеров.
  • При одинаковой группе элементы можно свободно перетаскивать между контейнерами.
  • Опция pull и put позволяет гибко управлять доступностью элементов для перемещения.
group: {
    name: 'shared',
    pull: 'clone', // создаёт копию элемента при переносе
    put: false     // запрещает вставку извне
}

Настройка стилей перетаскивания

Для визуального эффекта важно использовать CSS-классы ghostClass и chosenClass. Например:

.dragging {
    opacity: 0.5;
    border: 2px dashed #aaa;
}

.selected {
    transform: scale(1.05);
    transition: transform 0.2s;
}

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

Использование расширенных функций

SortableJS поддерживает расширенные функции:

  • swap — позволяет обменивать элементы местами без смещения остальных.
  • sort — включение/отключение возможности сортировки.
  • filter — предотвращает перетаскивание определённых элементов по CSS-селектору.
new Sortable(gallery, {
    animation: 150,
    draggable: '.item',
    filter: '.locked',
    onFilter: function (evt) {
        console.log('Попытка переместить заблокированный элемент', evt.item);
    }
});

Интеграция с другими библиотеками

SortableJS легко интегрируется с фронтенд-фреймворками (React, Vue, Angular) и системами хранения данных (localStorage, серверная база). При обновлении порядка элементов можно сохранять состояние галереи, отправляя массив идентификаторов изображений на сервер или в локальное хранилище.

const order = Array.from(gallery.children).map(item => item.dataset.id);
localStorage.setItem('galleryOrder', JSON.stringify(order));

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

Оглавление