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 ;-)
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?
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?
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.
You've said that you want to create simple things, on the Web platform. Unfortunately, these simple things will not take us anywhere. Please do a useful series, that can teach us to build massive Projects with Svelte and SvelteKit-- when you do find the time for it. WHAT WOULD I WANT? Here ( ua-cam.com/video/z1UMKqMN3VQ/v-deo.html ) is a series on building a Facebook clone with the MERN Stack (MongoDB, Express, React and Node) I will need you to do the same thing that this person did, and show us how to build the same thing (Facebook clone) with Svelte, SvelteKit and Postgres database. Regards.
🔥
Finally a tutorial that doesn't use svelte-dnd-action... thanks a lot!!!
What VSCode theme are you using? Joking aside, great video!
Hype
@@codygriffith1693 🥳
😁 💾
Nice!
I tried this on Svelte 5 with runes, smooth like butter. Nice video!
Where would u advise do i learn svelte 5?
Very impressive, Antonio -- well organized and presented, and it expands my understanding of how/when to use actions. Thanks.
svelte actions are so powerful. Thanks for sharing.
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 ;-)
Does this work with re-ordering between the items in the same column?
Amazing! 🔥
Very informative! I thought of something else for DND, not "drag and drop" lol
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?
Very well explained!
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?
Excellent video, great work !
Amazing! Thanks for sharing!
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?
I think this is called a closure.
@@trzcin5724 Thank you. I had just read up on Closures on MDN. I'll give a more detailed comment below this one.
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.
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
lifesaver, this is so useful!
great video
Cool, thanks!
Was bewirkt das '@const' im svelte/html code?
more about svelte 😍
On it 😁👍
Just incase someone implementing this on Tauri + Svelte set the "fileDropEnabled":false .
Cool!
I subscribe
Wow
You've said that you want to create simple things, on the Web platform.
Unfortunately, these simple things will not take us anywhere.
Please do a useful series, that can teach us to build massive Projects with Svelte and SvelteKit-- when you do find the time for it.
WHAT WOULD I WANT?
Here ( ua-cam.com/video/z1UMKqMN3VQ/v-deo.html ) is a series on building a Facebook clone with the MERN Stack (MongoDB, Express, React and Node)
I will need you to do the same thing that this person did, and show us how to build the same thing (Facebook clone) with Svelte, SvelteKit and Postgres database.
Regards.
This should work
... And it didn't
This is the most "Programmer thing" I can think of