Drag & Drop with Javascript in 4 minutes
Vložit
- čas přidán 26. 08. 2024
- 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
Draggable stick notes app video tutorial here: czcams.com/video/yBThHM2pBbE/video.htmlfeature=shared
It's great to see you back on CZcams, 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! ✨
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
This is really under rated
Thank you 🙏 - Dennis Ivy
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.
Nope, just awesome tools, cool projects and a awesome Backend as a service platform if you want it. - Dennis Ivy
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.
So nice tutorial video I like your direct explanation without a lots lablabla 👌your earn +1 subscribers
Excellent video, nice explanation!
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.
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
I like it, keep it up ❤
How can you stop the card from going over the borders of the viewport. I used
((card.offsetTop + card.clientHeight)
Love it thankyou
subscribed. this was great!
🙏
This is new to me, how did you come up with all the calculations? where can I learnt this. Thank you
I made a quick video explaining this, see if this helps :) x.com/appwrite/status/1783310348453544198
hi dennis we missed your django tutorials please if you have some times make videos in your channel
Soon, very soon Alex :) - Dennis Ivy
It gets a bit more interesting when you want to allow touch-move.
True, a topic worth covering for sure - Dennis ivy
Thanks for video 👍 phoneview the same with touchstart events ?
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
How do you generate a new picture for dragging and dropping?
That will be shown in the full "notes app" tutorial. Currently a work in progress. - Dennis Ivy
how to keep it persistent using 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)
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.
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!
how do i do this in react or next ??
That will be in the full tutorial ;)
Hi Dennis
Hey! 👋 - Dennis Ivy
Thanks for the link to the code (no)
I’ll add that in a bit
codepen.io/dennisivy/pen/VwNEPvY
You don't need those events.. there is already an event for drag in JavaScript 😂
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
@@Appwrite what if I needed the draggable item to be an image instead of "card"?