Drag & Drop with Javascript in 4 minutes 

Hey, sorry, it's tough for me to get back to all messages. I'll take a look now and will see if I can find it. Appreciate your patience and support :) - Dennis Ivy

Thank you 🙏 - Dennis Ivy

Nope, just awesome tools, cool projects and a awesome Backend as a service platform if you want it. - Dennis Ivy

🙏

I believe it would require a little more configuration to handle touch events. Something I'll have to take a minute and look at. - Dennis Ivy

I made a quick video explaining this, see if this helps :) x.com/appwrite/status/1783310348453544198

True, a topic worth covering for sure - Dennis ivy

Soon, very soon Alex :) - Dennis Ivy

My assumption is that you are referring to the draggable attribute, correct? While both ways work I found that draggable has some drawbacks, but really it's just a preference at this point. Both ways work fine :) Appreciate the support 🙏 - Dennis Ivy

@@Appwrite Hey! I found a way to make it a little bit more "appealing" that makes it clear when it's getting dragged. in the mouseDown function you can put the following code anywhere inside. card.style.cursor = "move"; and in the mouseUp function you can put the following code inside card.style.cursor = "pointer"; When you hover over the card, it will be pointer. On mouseDown it changes it to the "move" pointer which is two bidirectional arrows (hard to explain easy to see) and on mouseUp it changes it back. Super straight forward and hope it helps!

That will be shown in the full "notes app" tutorial. Currently a work in progress. - Dennis Ivy

Yea when it’s this simple, just JS is clean. However, I’m working on the full notes app (as I mention in the beginning) and honestly, a framework like react really does come in handy when the code gets more complicated. - Dennis Ivy

It's just a matter of updating the note on mouse up. The method I use is to just stringify the X & Y coordinationsa and store then in a attribute called "position". You'll see this in my upcomming video where I build out the entire notes app. Example: Save like this: JSON.stringify({x:47, y, 98}) Use like this: const position = JSON.parse(note.position) console.log(note.x) console.log(note.y)

That will be in the full tutorial ;)

Hey! 👋 - Dennis Ivy

You can accomplish the same thing in many different ways 😁And btw, the events you are referring to are good for drag and drop when it comes to sorting, ordering and placing items in a specific predestined position. This method gives more flexibility- Dennis Ivy

I’ll add that in a bit

codepen.io/dennisivy/pen/VwNEPvY