SvelteKit Drag And Drop List With svelte-dnd-action

Описание: 🎓 Join my learning platform for module based courses, learning exercises, and more: https://coderprep.com/

In this video we cover the basics of building drag an drop functionality in SvelteKit with svelte-dnd-action. This app uses both SvelteKit and TypeScript allowing you to have fully typed draggable and droppable components. The app also features objects for data, which means you can have any amount of data you need within your components (Anything that fits in an object). If you're looking to add drag and drop to your SvelteKit app, this is the video for you! Alongside building a drag and drop list, I also cover all the functionality behind what I'm doing. Allowing you to build upon this tutorial to create any drag and drop interface you like. We also use Skeleton UI for the UI components, which allows us to make beautiful user interfaces quickly!

Final project code: https://github.com/coopercodes/Svelte...

0:00 Intro / Project showcase
0:30 Skeleton UI setup
2:08 Building drag and drop container
3:40 Create card components for our list items
6:55 Typing dnd events and list items
9:33 Drag / drop items logic (consider, finalize)
11:25 Adding animations to our list
13:21 Creating advanced list items
16:14 Final discussion, thanks for watching!