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.
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?
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 ( ruclips.net/video/z1UMKqMN3VQ/видео.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.
What VSCode theme are you using? Joking aside, great video!
Hype
@@codygriffith1693 🥳
😁 💾
🔥
Very impressive, Antonio -- well organized and presented, and it expands my understanding of how/when to use actions. Thanks.
Finally a tutorial that doesn't use svelte-dnd-action... thanks a lot!!!
I tried this on Svelte 5 with runes, smooth like butter. Nice video!
Where would u advise do i learn svelte 5?
Nice!
svelte actions are so powerful. Thanks for sharing.
Does this work with re-ordering between the items in the same column?
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.
Excellent video, great work !
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 ;-)
Was bewirkt das '@const' im svelte/html code?
Very informative! I thought of something else for DND, not "drag and drop" lol
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?
Very well explained!
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?
Amazing! Thanks for sharing!
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
Amazing! 🔥
lifesaver, this is so useful!
Just incase someone implementing this on Tauri + Svelte set the "fileDropEnabled":false .
more about svelte 😍
On it 😁👍
great video
Cool, thanks!
Wow
Cool!
I subscribe
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 ( ruclips.net/video/z1UMKqMN3VQ/видео.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