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 классы
```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 для новых панелей

### Состояние перетаскивания
```javascript
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 можно удалить обработчики событий:
```javascript
document.removeEventListener('dragstart', handleDragStart);
document.removeEventListener('dragend', handleDragEnd);
// ... и другие обработчики
```

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

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

2. **Порядок не сохраняется**:
   - Проверьте, что localStorage доступен
   - Убедитесь, что нет ошибок в консоли браузера

3. **Визуальные эффекты не работают**:
   - Проверьте, что CSS стили загружены
   - Убедитесь, что нет конфликтов с другими стилями

### Отладка
Включите отладочные сообщения в консоли браузера:
```javascript
console.log('Drag & Drop Debug:', dragState);
```

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

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

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

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

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

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

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

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

### Будущие улучшения
- Поддержка перетаскивания между разными сетками
- Анимации при изменении размера окон
- Группировка окон по категориям
- Экспорт/импорт конфигурации порядка окон

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

---

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