It's great to see you back on RUclips, 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
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.
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!
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
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!
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
Draggable stick notes app video tutorial here: ruclips.net/video/yBThHM2pBbE/видео.htmlfeature=shared
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
This is really under rated
Thank you 🙏 - Dennis Ivy
It's great to see you back on RUclips, 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
why did you decide to use mousemove events instead of 'dragstart', 'dragend', 'drag', etc event listeners?
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.
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!
Excellent video, nice explanation!
So nice tutorial video I like your direct explanation without a lots lablabla 👌your earn +1 subscribers
Daymm that's quick typin sir
How can you stop the card from going over the borders of the viewport. I used
((card.offsetTop + card.clientHeight)
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
Simple and to the point 👍
😉
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 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)
subscribed. this was great!
🙏
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
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
thanks buddy ❤🔥
I like it, keep it up ❤
hi dennis we missed your django tutorials please if you have some times make videos in your channel
Soon, very soon Alex :) - Dennis Ivy
Thank you!
how do i do this in react or next ??
That will be in the full tutorial ;)
It gets a bit more interesting when you want to allow touch-move.
True, a topic worth covering for sure - Dennis ivy
Love it thankyou
It's very interesting.
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!
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"?