Сетки и таблицы

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

Настройка Draggable для таблиц

Для работы с таблицей необходимо инициализировать Draggable на контейнере, который содержит строки <tr> или ячейки <td>:

import {Sortable} from '@shopify/draggable';

const tableSortable = new Sortable(document.querySelectorAll('table tbody'), {
  draggable: 'tr',
  mirror: {
    constrainDimensions: true,
  },
});

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

  • draggable — CSS-селектор элементов, которые будут перетаскиваться. Для таблицы обычно это строки <tr>.
  • mirror.constrainDimensions — обеспечивает сохранение ширины и высоты элемента при перетаскивании, что важно для табличной структуры.

События Draggable для таблиц

Draggable предоставляет набор событий, которые позволяют отслеживать и изменять поведение при работе с сетками:

  1. drag:start — вызывается при начале перетаскивания строки.
  2. drag:move — вызывается при движении строки.
  3. drag:stop — вызывается при завершении перетаскивания.
  4. sortable:sorted — событие, которое срабатывает после изменения порядка элементов.
  5. sortable:stop — событие, которое вызывается после окончательного размещения элемента в новом месте.

Пример отслеживания события сортировки:

tableSortable.on('sortable:sorted', (event) => {
  const movedRow = event.data.dragEvent.source;
  console.log('Перемещённая строка:', movedRow);
});

Работа с ячейками таблиц

Draggable позволяет не только перетаскивать строки, но и отдельные ячейки. Для этого используют SwapAnimation и Sortable вместе:

import {Sortable, SwapAnimation} from '@shopify/draggable';

const cellSortable = new Sortable(document.querySelectorAll('table tbody'), {
  draggable: 'td',
  plugins: [SwapAnimation],
});

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

  • При работе с ячейками важно учитывать ширину и высоту, чтобы не нарушить структуру таблицы.
  • Плагин SwapAnimation создаёт плавную анимацию обмена позиций, что улучшает UX при перемещении элементов внутри сетки.

Ограничения перетаскивания

Draggable поддерживает гибкие ограничения:

  • Группы элементов: можно ограничить перемещение только внутри определённого контейнера с помощью параметра containers.
const sortable = new Sortable(document.querySelectorAll('.grid-container'), {
  draggable: '.grid-item',
  containers: [document.querySelector('.grid-container')],
});
  • Ограничение осей: параметр axis позволяет зафиксировать перемещение по вертикали или горизонтали, что полезно для таблиц:
const verticalSortable = new Sortable(document.querySelectorAll('table tbody'), {
  draggable: 'tr',
  axis: 'y',
});

Работа с сетками (Grid)

Для сеток Draggable позволяет перетаскивать элементы и автоматически обновлять их позиции:

const gridSortable = new Sortable(document.querySelectorAll('.grid'), {
  draggable: '.grid-item',
  mirror: {
    appendTo: 'body',
  },
});

Советы при работе с сетками:

  • Использовать mirror.appendTo: 'body' для корректного отображения перетаскиваемого элемента поверх других.
  • Для сеток с динамическим размером элементов полезно включать mirror.constrainDimensions, чтобы элемент не менял размер при перемещении.
  • Комбинировать Draggable с CSS Grid позволяет реализовать интерактивные канбан-доски, фотогалереи и плиточные интерфейсы.

Интеграция с обновлением данных

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

tableSortable.on('sortable:stop', () => {
  const rows = Array.from(document.querySelectorAll('table tbody tr'));
  const order = rows.map(row => row.dataset.id);
  fetch('/update-order', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({order}),
  });
});

Оптимизация производительности

При работе с большими таблицами или сетками следует учитывать:

  • Минимизировать количество DOM-элементов, которые инициализируются Draggable.
  • Использовать делегирование событий для динамически добавляемых элементов.
  • Для больших таблиц включать mirror.constrainDimensions и SwapAnimation только при необходимости, чтобы не перегружать браузер.

Дополнительные плагины

  • SwapAnimation — плавная анимация перемещения.
  • ResizeMirror — синхронизация размеров перетаскиваемого элемента с оригиналом.
  • Plugins для мультиселекции — позволяют перемещать несколько элементов одновременно.

Резюме функциональности Draggable для таблиц и сеток

  • Простая интеграция с <table> и CSS Grid.
  • Настраиваемые события для контроля за перетаскиванием.
  • Поддержка ограничения осей и контейнеров.
  • Плагины для анимации и работы с размерами.
  • Возможность синхронизации порядка элементов с сервером.

Эта гибкость делает Shopify Draggable мощным инструментом для создания интерактивных таблиц и сеток с современным UX.

Оглавление