SvelteKit Drag And Drop List With svelte-dnd-action

🎓 Join my learning platform for module based courses, learning exercises, and more: 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: 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!

[@Shijith1]

This video helped me figure out the syntax for the DND action library, thanks man!

[@666Bockwurst666]

love your sveltekit content!! would love some more :)

[@jasonmoggridge1566]

Thanks!

[@Loui3Hunna]

Cool stuff once again! Keep it up man!

[@CooperCodes]

Thank you for the consistent support Ludvig, means a bunch! :)

[@paulthomas1052]

Great tutorial - Svelte is pretty cool. 👌

[@CooperCodes]

Thanks so much for the comment Paul :). Svelte is pretty great! Lots of libraries (like this one) and its only growing, so hopefully my videos expose those to the new tech.

[@Airjaman]

Thank you, bro

[@paulclarke4099]

Really great video, thank you 💯😃👍

[@CooperCodes]

Thanks so much, and you are welcome! Appreciate the comment :)

[@SamirPatnaik]

very well explained

[@roblesrt]

Great! keep it up sir!

[@CooperCodes]

I will keep it up! Thank you for the comment :)

[@Pscytlk]

Nice content! I was wondering if you could make a collabration feature to the app some how! really needed!

[@TheNitrozwerg]

I can't get this to work. I can move items, but items in the source as well as the target area affected by the dnd get hidden and don't reappear. The item arrays get adjusted just fine but the ui just does not render the contents properly

[@vaisakhkm783]

great tutorial..... i was tring to make this work...
do you know how to dynamically add/ change elements in the list.... ?

[@CooperCodes]

In the items array mentioned in this video you can manually change any of the objects just like you would with a regular array in JavaScript. You just have to make sure that each item has a unique ID, but besides that you can manipulate the items array just like normal. Hopefully that answers your question! If you're curious on how the editing / saving works check out my to do list video here: th-cam.com/video/MnTfpmVzxQc/w-d-xo.html

[@mathiasfantoni2458]

6:56 I see a GitHub repository in the description, where the code would be, but not a link to where you copied the code from (i.e. the docs for DND Action)?

[@scott_itall8638]

What about draging between arrays?

[@AssetTrade]

Show with tanstack table

[@maskman4821]

It is very useful, I will watch it later on, thank you 🙏🤓😘🤗😍🤩👍👏

[@CooperCodes]

Thanks so much for your support! :) Hope you enjoy!

[@uzi-rm]

Tip. Don't just use duration-x with tailwindcss on the draggable items and avoid doing transition-all. do transition-colors transition-opacity duration-100 ... etc. if you don't the items will flicker like in the video.