logboard/docs/drag-and-drop.md

Drag & Drop для Multi-View режима

Обзор

LogBoard+ поддерживает drag & drop функциональность в режиме мультипросмотра (multi-view), позволяя пользователям изменять порядок окон логов путем перетаскивания их заголовков.

Возможности

Основные функции

• Перетаскивание окон: Изменение порядка окон логов в multi-view режиме
• Визуальная обратная связь: Анимации и стили во время перетаскивания
• Сохранение порядка: Автоматическое сохранение нового порядка в localStorage
• Placeholder: Визуальный индикатор места вставки во время перетаскивания

Индикаторы перетаскивания

• Иконка ⋮⋮: Отображается в заголовке каждого окна
• Курсор: Изменяется на grab/grabbing при наведении и перетаскивании
• Подсказки: Всплывающие подсказки с инструкциями

Использование

Как перетащить окно

1. Включите multi-view режим: Выберите несколько контейнеров (Shift+клик или Ctrl+клик)
2. Найдите иконку перетаскивания: В заголовке каждого окна есть иконка ⋮⋮
3. Начните перетаскивание: Нажмите и удерживайте левую кнопку мыши на заголовке окна
4. Переместите окно: Перетащите окно в нужную позицию
5. Отпустите кнопку мыши: Окно встанет на новое место

Визуальные эффекты

• Во время перетаскивания:

  • Окно становится полупрозрачным
  • Появляется тень
  • Окно слегка увеличивается
  • Создается placeholder на месте исходного окна

• При наведении на другие окна:

  • Окна подсвечиваются синим цветом
  • Показывается, куда будет вставлено окно

Техническая реализация

CSS классы

.multi-view-panel.dragging {
  opacity: 0.8;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  cursor: grabbing;
}

.multi-view-panel.drag-over {
  border-color: var(--accent);
  background: var(--tab-active);
  transform: scale(1.01);
}

.multi-view-panel.drag-placeholder {
  background: var(--chip);
  border: 2px dashed var(--accent);
  opacity: 0.5;
  pointer-events: none;
}

JavaScript функции

• initDragAndDrop(): Инициализация drag & drop
• handleDragStart(): Обработчик начала перетаскивания
• handleDragEnd(): Обработчик окончания перетаскивания
• handleDrop(): Обработчик сброса элемента
• reorderMultiViewPanels(): Перестановка панелей
• updateDragAndDrop(): Обновление drag & drop для новых панелей

Состояние перетаскивания

let dragState = {
  isDragging: false,
  draggedElement: null,
  draggedIndex: -1,
  originalIndex: -1,
  placeholder: null
};

Ограничения

Поддерживаемые браузеры

• Chrome 66+
• Firefox 60+
• Safari 12+
• Edge 79+

Условия работы

• Только в multi-view режиме (2+ контейнера)
• Только перетаскивание заголовков окон
• Не работает в single-view режиме

Настройки

Сохранение порядка

Порядок окон автоматически сохраняется в localStorage и восстанавливается при перезагрузке страницы.

Отключение функциональности

Для отключения drag & drop можно удалить обработчики событий:

document.removeEventListener('dragstart', handleDragStart);
document.removeEventListener('dragend', handleDragEnd);
// ... и другие обработчики

Устранение неполадок

Проблемы с перетаскиванием

1. Окно не перетаскивается:

   • Убедитесь, что вы в multi-view режиме
   • Проверьте, что перетаскиваете за заголовок окна
   • Убедитесь, что браузер поддерживает HTML5 Drag & Drop

2. Порядок не сохраняется:

   • Проверьте, что localStorage доступен
   • Убедитесь, что нет ошибок в консоли браузера

3. Визуальные эффекты не работают:

   • Проверьте, что CSS стили загружены
   • Убедитесь, что нет конфликтов с другими стилями

Отладка

Включите отладочные сообщения в консоли браузера:

console.log('Drag & Drop Debug:', dragState);

Примеры использования

Базовое перетаскивание

// Автоматически инициализируется при загрузке страницы
initDragAndDrop();

Программное изменение порядка

// Перестановка панелей программно
reorderMultiViewPanels(0, 2); // Переместить первую панель на третье место

Получение текущего порядка

// Получить текущий порядок контейнеров
const currentOrder = state.selectedContainers;
console.log('Текущий порядок:', currentOrder);

Совместимость

С существующим функционалом

• Совместимо с AJAX обновлением логов
• Работает с фильтрацией по уровням логирования
• Поддерживает автопрокрутку и перенос строк
• Интегрируется с системой сохранения настроек

Производительность

• Минимальное влияние на производительность
• Оптимизированные обработчики событий
• Эффективное обновление DOM

Планы развития

Будущие улучшения

• Поддержка перетаскивания между разными сетками
• Анимации при изменении размера окон
• Группировка окон по категориям
• Экспорт/импорт конфигурации порядка окон

Обратная связь

Для предложений по улучшению drag & drop функциональности обращайтесь к автору проекта.

---

Автор: Сергей Антропов
Сайт: https://devops.org.ru
Версия: 2.0