Drag & Drop with Javascript in 4 minutes

Learn how to build draggable elements with Javascript in a few simple steps.
Source Code: codepen.io/den...
Instructor: / dennisivy11 / / dennis-ivanov
💬 Follow Appwrite on social media & join our Discord community.
• Twitter: / appwrite
• Discord: appwrite.io/di...
• LinkedIn: / appwrite

[@Appwrite]

Draggable stick notes app video tutorial here: kzbin.info/www/bejne/r3O3mXuDZ9V1mKcfeature=shared

[@zaanly]

It's great to see you back on KZbin, Dennis. Your Django tutorials were truly missed. I even tried contacting you through LinkedIn but didn't hear back. Looking forward to your new Django content! ✨

[@Appwrite]

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

[@iantimmis651]

This channels name and logo make it feel like its a company trying to sell me something. I thought this was going to be an ad for some JS lib.

[@Appwrite]

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

[@artipeo816]

This is really under rated

[@Appwrite]

Thank you 🙏 - Dennis Ivy

[@willia_music]

why did you decide to use mousemove events instead of 'dragstart', 'dragend', 'drag', etc event listeners?

[@srinivasaraoyp3640]

It's very interesting.

[@dkfailor]

Nice tutorial and easy to understand. But shouldn't you use defer or async instead of putting code between the closing body tag and closing html tag? I could be wrong but I don't believe that is recommended as standard practice.

[@prateekyadav797]

How can you stop the card from going over the borders of the viewport. I used ((card.offsetTop + card.clientHeight)

[@SamehMustafa007]

So nice tutorial video I like your direct explanation without a lots lablabla 👌your earn +1 subscribers

[@garasipemula]

I like it, keep it up ❤

[@mrchineduOfficial]

This is new to me, how did you come up with all the calculations? where can I learnt this. Thank you

[@Appwrite]

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

[@AWM_2023]

A bit too fast. And in 2024 we cannot refrain ourselves from excellence, so the css should be optimal, changing the cursor to draggable and dragging during the move. Thanks for the video and I hope you improve and grow a lot 💪🏼 congratulations! I’m rooting for you.

[@Appwrite]

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

[@walkastray007]

@@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!

[@alexdin1565]

hi dennis we missed your django tutorials please if you have some times make videos in your channel

[@Appwrite]

Soon, very soon Alex :) - Dennis Ivy

[@user-lc7pn8zp8f]

Thanks for video 👍 phoneview the same with touchstart events ?

[@Appwrite]

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

[@imagineiffcom]

I did this using jquery ui for an NBA team's contest page many years ago. Doing this with pure javascript is very interesting and gives a lot more control.

[@Appwrite]

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

[@atl_tube]

How do you generate a new picture for dragging and dropping?

[@Appwrite]

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

[@TreeLuvBurdpu]

It gets a bit more interesting when you want to allow touch-move.

[@Appwrite]

True, a topic worth covering for sure - Dennis ivy

[@luis96xd]

Excellent video, nice explanation!

[@darsico]

how to keep it persistent using appwrite?

[@Appwrite]

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)

[@everchanging19]

Love it thankyou

[@ashishsatavase8031]

how do i do this in react or next ??

[@Appwrite]

That will be in the full tutorial ;)

[@ИванРагозин-я8я]

Thanks for the link to the code (no)

[@Appwrite]

I’ll add that in a bit

[@Appwrite]

codepen.io/dennisivy/pen/VwNEPvY

[@gerryramosftw]

subscribed. this was great!

[@Appwrite]

🙏

[@kumargupta7149]

Hi Dennis

[@Appwrite]

Hey! 👋 - Dennis Ivy

[@d.minkov]

You don't need those events.. there is already an event for drag in JavaScript 😂

[@Appwrite]

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

[@renaissancewoman5373]

@@Appwrite what if I needed the draggable item to be an image instead of "card"?