ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2025
- 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: th-cam.com/video/yBThHM2pBbE/w-d-xo.htmlfeature=shared
It's great to see you back on TH-cam, 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
Just what I was looking for, Thank you very much!!! :D
great!!! thank you so much. js is perfect
why did you decide to use mousemove events instead of 'dragstart', 'dragend', 'drag', etc event listeners?
i dont usually use the drag api (dragstart, dragend, etc) beacause its not very custumizable. you cant change the cursor style while you're dragging, you dont have a lot of freedom in styling the draggable image, and more things. so unless you dont care about these details or efficiency is very important, building a drag and drop from scratch like this is probably gonna be the better way (just my opinion)
You can use pageX and pageY instead if you have problems on scrollable screens
Simple and to the point 👍
😉
Excellent video, nice explanation!
So nice tutorial video I like your direct explanation without a lots lablabla 👌your earn +1 subscribers
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
Daymm that's quick typin sir
Hello! This was very helpfull, but came in to an issue. How would you keep the card dragable only inside it's container?. I've use position absolute instead of fixed since I've put this exercise as an other section among sections and when I drag the card, the absolute position makes it dragable all over the place. A hint would be of value. Thanks!
thanks buddy ❤🔥
Thank you!
How can you stop the card from going over the borders of the viewport. I used
((card.offsetTop + card.clientHeight)
I like it, keep it up ❤
subscribed. this was great!
🙏
It gets a bit more interesting when you want to allow touch-move.
True, a topic worth covering for sure - Dennis ivy
hi dennis we missed your django tutorials please if you have some times make videos in your channel
Soon, very soon Alex :) - Dennis Ivy
Love it thankyou
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.
No it’s fine because by end of the document if you place the script before the body closes then the html will have finished parsing so the js isn’t blocking anything
@@usethisforproductivity-tg7xq the "defer" attribute on the script tag will make it so that the js file only loads after the html content, and it is best practise to put the script tags on the head tag with defer
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
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
It's very interesting.
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!
I modified the code so that it works on your phone as well ❤️ by event ( touchStart ) and event ( touchEnd )
...
Code
....
let newX = 0, newY = 0, startX = 0, startY = 0;
const card = document.getElementById('card');
card.addEventListener('mousedown', mouseDown);
card.addEventListener('touchstart', touchStart);
function mouseDown(e){
startX = e.clientX;
startY = e.clientY;
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
}
function mouseMove(e){
newX = startX - e.clientX;
newY = startY - e.clientY;
startX = e.clientX;
startY = e.clientY;
card.style.top = (card.offsetTop - newY) + 'px';
card.style.left = (card.offsetLeft - newX) + 'px';
}
function mouseUp(){
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
}
function touchStart(e){
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
document.addEventListener('touchmove', touchMove);
document.addEventListener('touchend', touchEnd);
}
function touchMove(e){
newX = startX - e.touches[0].clientX;
newY = startY - e.touches[0].clientY;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
card.style.top = (card.offsetTop - newY) + 'px';
card.style.left = (card.offsetLeft - newX) + 'px';
}
function touchEnd(){
document.removeEventListener('touchmove', touchMove);
document.removeEventListener('touchend', touchEnd);
};
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 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"?