# Phase 7: Drag-and-Drop Enhancements

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Enhance drag-and-drop to support cross-section widget moves, section reordering, and visual drop zone indicators — all gated behind edit mode.

## Tasks

- [ ] Enable widget drag-and-drop ONLY in edit mode (disable in view mode)
- [ ] Cross-section widget drag: allow dragging a widget from one section to another
- [ ] Visual drop zones: highlight target section/position when dragging
- [ ] Section-level drag-and-drop with visual indicators (reorder sections)
- [ ] Drag handles only visible in edit mode
- [ ] Track all reorder/move changes in edit mode changeset
- [ ] Handle edge cases: dragging to empty sections, dragging last widget out of section
- [ ] Smooth animations during drag operations

## Files to Modify/Create
- `src/lib/components/widget/WidgetGrid.svelte` — enable DnD only in edit mode, cross-section support
- `src/lib/components/board/Board.svelte` — section-level DnD in edit mode
- `src/lib/components/section/Section.svelte` — drop zone indicators
- `src/lib/components/widget/WidgetEditOverlay.svelte` — drag handle activation

## Acceptance Criteria
- Widgets can be dragged between sections in edit mode
- Sections can be reordered by dragging in edit mode
- Drop zones highlight during drag
- No drag-and-drop functionality in view mode
- All moves tracked in changeset (not persisted until Save)
- Animations are smooth

## Notes
- `svelte-dnd-action` supports cross-container DnD via shared `dropTargetStyle`
- Need to handle `sectionId` changes when widgets move between sections
- Existing DraggableBoard/DraggableSection are used on edit page — may adapt or replace

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in after completing this phase -->