Кастомизация заглушек

Gridstack.js предоставляет мощный инструмент для создания интерактивных сеточных интерфейсов с возможностью перетаскивания и изменения размера виджетов. Одним из важных элементов взаимодействия с сеткой являются заглушки (placeholders) — визуальные индикаторы, которые появляются во время перетаскивания или изменения размера виджета, показывая возможное место размещения элемента. Кастомизация заглушек позволяет улучшить UX, сделать интерфейс более информативным и визуально привлекательным.

Настройка стандартной заглушки

По умолчанию Gridstack.js использует простую рамку для заглушки. Она появляется при начале перетаскивания элемента с классом .grid-stack-item. Основные параметры можно изменить через опции при инициализации сетки:

const grid = GridStack.init({
  placeholderClass: 'custom-placeholder', // кастомный класс для заглушки
  float: true,                            // позволяет заглушке "плавать" между рядами
});
  • placeholderClass — строка с названием CSS-класса, который будет применен к заглушке. Это ключевой способ визуальной кастомизации.
  • float — если включено, заглушка может перемещаться свободно по сетке без ограничения нижней границы, что удобно для динамических интерфейсов.

Полная кастомизация через CSS

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

.custom-placeholder {
  background-color: rgba(0, 123, 255, 0.2);
  border: 2px dashed #007bff;
  transition: all 0.2s ease;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}
  • background-color с прозрачностью позволяет заглушке быть видимой, но не отвлекать внимание.
  • border и border-radius создают четкую, но мягкую границу.
  • transition делает анимацию появления и перемещения плавной.
  • box-shadow добавляет глубину, визуально отделяя заглушку от других элементов.

Динамическая кастомизация через события

Gridstack.js генерирует события при перетаскивании и изменении размера элементов, которые можно использовать для динамического изменения заглушки. Основные события:

  • dragstart — начало перетаскивания
  • drag — перемещение элемента
  • dragstop — завершение перетаскивания
  • resizestart, resize, resizestop — аналогичные события для изменения размеров

Пример динамического изменения стиля заглушки:

grid.on('drag', function(event, el) {
  const placeholder = grid.engine.placeholder;
  if (placeholder) {
    placeholder.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    placeholder.style.border = '2px dashed red';
  }
});
  • grid.engine.placeholder возвращает текущую заглушку.
  • Можно менять любые свойства CSS в реальном времени, например цвет в зависимости от позиции или других условий.

Использование кастомных HTML-заглушек

Gridstack.js позволяет использовать не только стандартные прямоугольные заглушки, но и полноценные HTML-шаблоны. Для этого можно динамически вставлять элементы в DOM во время dragstart:

grid.on('dragstart', function(event, el) {
  const placeholder = document.createElement('div');
  placeholder.classList.add('custom-html-placeholder');
  placeholder.innerHTML = `<span>Перетащи сюда</span>`;
  el.parentNode.appendChild(placeholder);
  grid.engine.placeholder = placeholder;
});

CSS для такого подхода:

.custom-html-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 255, 0, 0.2);
  border: 2px dashed green;
  height: 100%;
  width: 100%;
  font-weight: bold;
  color: #008000;
}
  • Такой способ позволяет вставлять подсказки, иконки или текстовые индикаторы.
  • Можно создавать визуально насыщенные интерфейсы с подсветкой и анимациями.

Кастомизация поведения заглушки

Помимо внешнего вида, заглушки можно настраивать логически, например изменять их размеры или блокировать определённые позиции. Для этого Gridstack.js предоставляет API методов:

  • grid.placeholder.style.width =${cols * cellWidth}px`` — установка ширины в зависимости от количества колонок.

  • grid.placeholder.style.height =${rows * cellHeight}px`` — аналогично для высоты.

  • В комбинации с событиями drag и resize можно реализовать:

    • автоматическое изменение формы заглушки под размер перетаскиваемого элемента
    • подсветку запрещённых ячеек
    • динамическую подгонку размеров под соседние элементы

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

Для улучшения UX часто добавляют анимацию появления и перемещения заглушки. Использование CSS-переходов или transform позволяет добиться эффекта “скольжения”:

.custom-placeholder {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

Дополнительно можно использовать requestAnimationFrame для плавного обновления позиции в JS, особенно при сложных сетках с большим количеством элементов.

Итоговые рекомендации по кастомизации

  • CSS-класс — основной инструмент визуальной кастомизации. Всегда определять отдельный класс для заглушки.
  • События Gridstack.js позволяют динамически изменять заглушку в зависимости от положения или состояния.
  • HTML-шаблоны дают возможность создавать сложные визуальные подсказки.
  • Плавная анимация делает взаимодействие с сеткой естественным и приятным для пользователя.
  • Логическая настройка размеров помогает подгонять заглушку под конкретные требования интерфейса, повышая точность и предсказуемость размещения виджетов.

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

Оглавление