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

[@JoyofCodeDev]

🔥

[@RDR-jn1sn]

Finally a tutorial that doesn't use svelte-dnd-action... thanks a lot!!!

[@Huntabyte]

What VSCode theme are you using? Joking aside, great video!

[@codygriffith1693]

Hype

[@Huntabyte]

@@codygriffith1693 🥳

[@techn1cs]

😁 💾

[@SvelteSociety]

Nice!

[@nickstaresinic9933]

Very impressive, Antonio -- well organized and presented, and it expands my understanding of how/when to use actions. Thanks.

[@FabianVilersBe]

Nice tutorial, thank you. May I add that I'd rather use the API function "dispatchEvent" on the node object to emit a "drop" custom event with the required data. node.dispatchEvent(new CustomEvent('custom_drop', { detail: data })); Then, the usage would be more idiomatic by writing (...) My two cents ;-)

[@daleyc.3008]

I tried this on Svelte 5 with runes, smooth like butter. Nice video!

[@blokche_dev]

svelte actions are so powerful. Thanks for sharing.

[@Martin-kt8sz]

Excellent video, great work !

[@ScriptRaccoon]

Very well explained!

[@justingolden87]

Very informative! I thought of something else for DND, not "drag and drop" lol

[@roblesrt]

Amazing! Thanks for sharing!

[@hallowatcher]

Cool, thanks!

[@Hurby24]

great video

[@FrostFlag]

lifesaver, this is so useful!

[@Kikibeh]

Great video, very helpful! How would you handle the drag and drop on touch devices e.g. smartphones or tablets? May you do a video of that as well?

[@naranyala_dev]

more about svelte 😍

[@SarcevicAntonio]

On it 😁👍

[@zipcod7726]

Cool! I subscribe

[@cv3787]

Does this work with re-ordering between the items in the same column?

[@IStMl]

Wow

[@NabekenProG87]

Very cool, unfortunaltely the DnD API does not work on mobile :c. I don't want to use another library, I just want to be happy

[@alpaslaneldemir6904]

Just incase someone implementing this on Tauri + Svelte set the "fileDropEnabled":false .

[@GrzegorzPalian]

Does your "update" function actually work? Unless there is some svelte magic going on, the functions created with the initial value of `state` (like handle_dragstart) would create a closure and never get the updated value when you reassign the variable like this. Am I missing something here?

[@sledgex9]

Can someone explain to me 5:10? I am coming from C++ and I am a JS noob. It seems to me that changing the "state" variable after the draggable() function has returned (via update()) it will also affect the data seen inside handle_dragstart() after it is called as an event listener at a later time. Is that correct? So the "state" variable not only outlives the draggable() function but it also has effects on the nested functions? Does this behavior/pattern have a name in JS so I can read up on it?

[@trzcin5724]

I think this is called a closure.

[@sledgex9]

@@trzcin5724 Thank you. I had just read up on Closures on MDN. I'll give a more detailed comment below this one.

[@sledgex9]

For any other noob wondering: You must read on what "closures" are in Javascript and how they behave in that context. MDN has a very good article on them. In short and very simple words(mostly in C++ speak): Closures( lambdas in C++) capture the variables in their surroundings by reference AND extend their lifetime. Hence, a variable captured in one closure can be updated in another closure that has captured the same variable even if that variable was local to the surrounding scope.