This video shows how to create a minimal draggable and dropzone Svelte Action using the browser native Drag and Drop API. It only takes about 80 lines of code for the Svelte Actions.
Svelte Actions are functions that make a node and hook into their lifecycle, making it easy to compose DOM work in components.
Boilerplate Kanban Board without Drag and Drop for coding along: https://www.sveltelab.dev/rl7w8rx3eydi1xy
Finished Board with Drag and Drop: https://www.sveltelab.dev/xzz3zkyjzwe6kfk
00:00 Intro
00:34 Data, HTML and CSS
01:33 Svelte Actions
01:53 use:draggable Action
05:20 use:dropzone Action
12:18 Recap
13:32 Example Use Cases
14:12 Note on Accessibility
14:35 No Library Needed
15:03 Outro
