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 ( th-cam.com/video/z1UMKqMN3VQ/w-d-xo.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 🥳
😁 💾
Finally a tutorial that doesn't use svelte-dnd-action... thanks a lot!!!
Nice!
Very impressive, Antonio -- well organized and presented, and it expands my understanding of how/when to use actions. Thanks.
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 ;-)
I tried this on Svelte 5 with runes, smooth like butter. Nice video!
svelte actions are so powerful. Thanks for sharing.
Very informative! I thought of something else for DND, not "drag and drop" lol
Very well explained!
Excellent video, great work !
Amazing! 🔥
Amazing! Thanks for sharing!
lifesaver, this is so useful!
great video
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?
more about svelte 😍
On it 😁👍
Just incase someone implementing this on Tauri + Svelte set the "fileDropEnabled":false .
Cool, thanks!
Does this work with re-ordering between the items in the same column?
Was bewirkt das '@const' im svelte/html code?
Cool!
I subscribe
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?
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.
Wow
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
This should work
... And it didn't
This is the most "Programmer thing" I can think of
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 ( th-cam.com/video/z1UMKqMN3VQ/w-d-xo.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.