Svelte makes Drag And Drop API easy!

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/rl7w8rx3eyd... Finished Board with Drag and Drop: https://www.sveltelab.dev/xzz3zkyjzwe... 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