Drag & Drop Kanban Board in Compose Desktop | Kotlin Desktop #10
21views
2likes
016:29
T
Taught by Celeste AI - AI Coding Coach
View on YouTubeDescription
Build a kanban task board with drag-and-drop in Kotlin Compose Desktop! Learn how to use dragAndDropSource, DragAndDropTarget, and
mutableStateMapOf to create an interactive three-column board where you can drag task cards between To Do, In Progress, and Done columns.
What You'll Learn:
- dragAndDropSource modifier with long-press gesture detection
- DragAndDropTransferable for carrying data between components
- dragAndDropTarget with onDrop, onEntered, and onExited callbacks
- Visual hover highlights for drop target feedback
- mutableStateMapOf for reactive move/add/delete state management
- AlertDialog for adding new tasks
- LazyColumn with keyed items for efficient task lists
Timestamps:
0:00 - Introduction
0:15 - Preview: What We're Building
0:45 - Project Setup (Gradle, Compose Dependencies)
2:14 - Task Model (Column Enum, Data Class)
3:02 - Task Card (Drag Source)
5:47 - Kanban Board (Drop Target, Columns, Dialog)
11:27 - Main & Compile
13:14 - Live Demo: Task Board in Action
14:29 - Recap & Key Takeaways
15:29 - Thanks for Watching
Key Takeaways:
1. Source — dragAndDropSource with detectTapGestures(onLongPress) starts drag
2. Transfer — DragAndDropTransferable(StringSelection) carries data between source and target
3. Drop Target — dragAndDropTarget with DragAndDropTarget interface handles drops
4. Highlight — onEntered/onExited callbacks give visual feedback during drag hover
5. Map State — mutableStateMapOf provides reactive state for move/add/delete operations
Previous Lesson:
Lesson 09: Database & Storage
https://youtube.com/...
Next Lesson:
Lesson 11: Navigation & Routing (coming soon)
Tech Stack:
Kotlin 2.1, Compose Multiplatform 1.7.3, Material3
Foundation Drag & Drop API (Experimental)
Gradle 8.10, JVM 17+
Source Code: https://github.com/GoCelesteAI/kotlin_desktop_drag_drop
Taught by CelesteAI
If you found this helpful, please like and subscribe for more Kotlin Desktop tutorials!
#kotlin #compose #desktop #material3 #dragAndDrop #kanban #taskBoard #tutorial #programming
Back to tutorialsOpen in YouTube
Duration
16:29
Published
February 21, 2026
Added to Codegiz
March 15, 2026