I started javascript 20 years ago and NONE of this was easy without writing a massive amount of code. I'm getting back into this after being out of the game for about 12 years and so much has changed. I'm not saying it's ridiculously easy compared to back then but I am more impressed by the CSS here than anything, but at least the code (js) is way more succinct. Thanks for sharing this. It's my first step into something that I think will be very useful for me as a language teacher :)
Thank you for this post. This is almost complete as to what I needed. It was a wonderful introduction to the world of drag and drop on the web. I will incorporate this into my electron app with node. Again, thank you.
This video is the best. I like this video because he really does to teach something, other similar videos just call a script from somewhere else. Nothing help for coding.
Pretty awesome stuff! I've got an LP wall display in my front room (I know, pretty hipster) and lockdown's got me lacking ideas so using your tutorial as a basis, I've created a virtual version by replacing the text of each div with an image (the LP cover). Cheers for the help!
Thanks for the video, just curious - why do we need to put the loop for lists inside the list_items loop? I moved it outside so it's not nested loop and it works, maybe I'm missing something so any pointer will be greatly appreciated!
Thank you so much for the video! I have one question. How do you target the element at dragging state? In the intro section of the video, your item box has a red border, but you didn't show this step in the detailed video. I would appreciate it if you can let me know how that was done. Thank you!
Ah, sorry. I didn't realise I missed that step. There is an event called "drag" you would use to then apply the border while the element is being dragged then you remove the border on the "drop" event. I hope this helps.
@@TylerPotts Ahhh Thank you! That works. May I ask you one more question? Do you by any chance know how to change the ghosted style while an item was dragged? I tried to change opacity, background, those didn't work. I searched around, didn't find a solution. Maybe that's browser default behavior?
Hi, i learned that with different size boxs the only way to D n D the larger box is to use css resize and then resize it the same size or smaller than the other boxes, they it can be D n D . Now can you do a video please of how to save the data to the DB so that users can save their positions then it can be loaded at login using PHP ... Thanks...
Do you know how exactly this magic with timeout works? I mean we have event loop, tasks queue and tasks to render page, do you know what happens when? I understand only that timeout with 0 will put the task in the queue but what happens next?
I’m trying to create an app with a kanban board in it. So the user has to login first to access the board, but when I try to redirect user from login page to his kanban board, drag and drop does not work( but if i start kanban html on its own without first logging in, it works). Does it have to do something with these timeouts? How do I fix this?
How would you make it sort? As in if i move list item 1 and drop it. Now if i take it back to the first list column, it goes to the end again. I'd like it to sort/return to it's default state again. Any help?
Good tutorial, but... This is my 8th video on drag and drop and I have still not seen the functionality that I need. I seems like it would be a common thing. I need the drop zones to act like SLOTS. They should be able to accept one drop only and then reject further drops. I have learned that "cancelDefault()" can make a normally un-droppable element droppable, but then how to you cancel the cancel, that is, restore the default, UNDROPPABLE behavior one a drop zone has gotten an item. I am making a Tic Tac Toe game. once a game board slot has received either an X or an O, I need to to refuse any further drops, and ideally, have the hovering piece returned to it's start position.
Thanks for the video. I am trying to implement the scenario. After drag and drop, when i click on the dragged element, I have to display a popup message with some details, but event listener for click is not working.
I really need just that but with a dynamic database. I've set up the database but i just don't know how I can Display these list items from my database -.- Anyone that can help me? I would pay a small amount if you show me how I can do that.
noob question, what if I want to make a website and I want to drag a photo to a box but the photo will remain after being drop. Another thing, can I do that using only html or css or I really need java
I haven't coded a day in my life, but I'm conceptualizing something like this for a business application I need to start due to a job loss. How do I go about using this in Dreamweaver?
I suggest you don't actually use Dreamweaver to code. I never heard or seen anyone using it professionally (maybe I'm just unlucky). Don't be scared by Visual Studio Code. It's really good, solid. If you haven't coded a day in your life, don't start with advanced Javascript. Start with easy stuff. At least do a crash course on HTML and CSS, let it sink in, then start basic Javascript, then step up. It's essential to build fundamentals. I wish you all good and thank you for considering joining this great world of developing.
You should get a reference to the child object maybe a class then reference the parentNode.querySelector the child then remove it in dragend event listenre. Sorry if this doesn't make too much sense it's hard to explain over text.
I started javascript 20 years ago and NONE of this was easy without writing a massive amount of code. I'm getting back into this after being out of the game for about 12 years and so much has changed. I'm not saying it's ridiculously easy compared to back then but I am more impressed by the CSS here than anything, but at least the code (js) is way more succinct.
Thanks for sharing this. It's my first step into something that I think will be very useful for me as a language teacher :)
I like the video , but having a hard time , I will keep at it.
Thank you for this post. This is almost complete as to what I needed. It was a wonderful introduction to the world of drag and drop on the web. I will incorporate this into my electron app with node. Again, thank you.
Impressed at CSS mastery. Drag and drop seem so simple.
Thanks!
This video is the best. I like this video because he really does to teach something, other similar videos just call a script from somewhere else. Nothing help for coding.
I got it to work eventually. I had to change the last "this" in the nested for with the list looping variable
thank you thats exactly what i needed. thank you so much
You're welcome!
Fantastic! Keep up the good work
great video mate. love these
Glad you like them!
Very Helpful. Thanks for the video
Thanks a lot, Tyler!! 🤟
Any time!
Very very nice. an educational video. Thanks.
as far as I know, 'this' keyword had a different context inside of settimeout() because of this it didn't work. Thanks for the video, it was helpful!
I never knew your videos were both very educating and easily understandable 🙌🏽😁. Thank you for this amazing video.
Thank you! :)
Thanks a lot for posting and take your time , it really help!
I'm happy it helps that's the aim! To build a community for new web developers to learn and grow.
I liked that video very much. Thank you
Happy you liked it :D
Very helpful. Thanks for walking us through with the explanations.
Pretty awesome stuff! I've got an LP wall display in my front room (I know, pretty hipster) and lockdown's got me lacking ideas so using your tutorial as a basis, I've created a virtual version by replacing the text of each div with an image (the LP cover). Cheers for the help!
Great content! I took a little break from coding but back now :) I have a few of your videos to catch up on!
Haha awesome I hope you enjoy! Thank you!
Thanks taking your time to make these awesome videos 💙
Thanks man, I appreciate the comment and I will always take time to make videos! 😁
@@TylerPotts Great... 💙
Sick video brother! loved it. Also you did an excellent job at explaining so thank you very much
Glad you liked it!
Thanks for share this tutorial. Helpfull
Thanks for the video, just curious - why do we need to put the loop for lists inside the list_items loop? I moved it outside so it's not nested loop and it works, maybe I'm missing something so any pointer will be greatly appreciated!
Thank you so much for the video! I have one question. How do you target the element at dragging state? In the intro section of the video, your item box has a red border, but you didn't show this step in the detailed video. I would appreciate it if you can let me know how that was done. Thank you!
Ah, sorry. I didn't realise I missed that step. There is an event called "drag" you would use to then apply the border while the element is being dragged then you remove the border on the "drop" event. I hope this helps.
@@TylerPotts Ahhh Thank you! That works. May I ask you one more question? Do you by any chance know how to change the ghosted style while an item was dragged? I tried to change opacity, background, those didn't work. I searched around, didn't find a solution. Maybe that's browser default behavior?
Oh! realy easy. Thanks a lot
Most welcome 😊
Hi, i learned that with different size boxs the only way to D n D the larger box is to use css resize and then resize it the same size or smaller than the other boxes, they it can be D n D . Now can you do a video please of how to save the data to the DB so that users can save their positions then it can be loaded at login using PHP ... Thanks...
Thanks for this video, great tutorial
Thanks a lot!! Good job!!
thanks alot for your effort
Thanks for the video. What colour theme are you using for VS Code? It's so nice!
What sort of drag and drop is this where we start things with writing lines of code?
Which theme do you use ? Your syntax looks great
I think this was Material theme using the material icon theme!
Do you know how exactly this magic with timeout works? I mean we have event loop, tasks queue and tasks to render page, do you know what happens when? I understand only that timeout with 0 will put the task in the queue but what happens next?
Great tutorial👍
Thanx!!
how did you remove the forbidden sign when you drag with cursor?
Very very nice.. Thanks for a nice and simple walk through!! How about a expansion to a Tree type interface??
Sounds good I'll look into it!!
I’m trying to create an app with a kanban board in it. So the user has to login first to access the board, but when I try to redirect user from login page to his kanban board, drag and drop does not work( but if i start kanban html on its own without first logging in, it works). Does it have to do something with these timeouts? How do I fix this?
What about positioning and sorting ?
How would you make it sort?
As in if i move list item 1 and drop it. Now if i take it back to the first list column, it goes to the end again. I'd like it to sort/return to it's default state again. Any help?
how to get the position where the item was placed ?
Hi, is that draggable on mobile devices?
Good tutorial, but... This is my 8th video on drag and drop and I have still not seen the functionality that I need. I seems like it would be a common thing. I need the drop zones to act like SLOTS. They should be able to accept one drop only and then reject further drops. I have learned that "cancelDefault()" can make a normally un-droppable element droppable, but then how to you cancel the cancel, that is, restore the default, UNDROPPABLE behavior one a drop zone has gotten an item. I am making a Tic Tac Toe game. once a game board slot has received either an X or an O, I need to to refuse any further drops, and ideally, have the hovering piece returned to it's start position.
this is awesome!!!
thx for video man !!!!!!!!!!
Thanks for the video. I am trying to implement the scenario. After drag and drop, when i click on the dragged element, I have to display a popup message with some details, but event listener for click is not working.
Thanks , and i need to add 3 more column in second row can you please help me ?
how to change position 2 elements which both in a colume?
Thank's for good video
great💙💙💙💙
I had to watch 5 videos to check if UA-cam was messing up the video or the video is blurry. BTW good video.
I think UA-cam messed up the processing for the first 3 minutes but thanks man!
I think requestanimationframe is more functional instead of settimeout
what happened to the Video on making this dynamic?
I really need just that but with a dynamic database. I've set up the database but i just don't know how I can Display these list items from my database -.-
Anyone that can help me? I would pay a small amount if you show me how I can do that.
great !! thx~
:D
Thanks for this.
Anytime, I enjoy doing it.
@@TylerPotts Thanks man. Awesome tutorial.
@@TylerPotts Hey thanks for the tutorial can you please explain date object in javascript and then show how to create a datepicker?
Nice idea. I will look into this for you. :D
This should hopefully be tomorrows video if everything goes to plan. :D
How would you delete?
noob question, what if I want to make a website and I want to drag a photo to a box but the photo will remain after being drop. Another thing, can I do that using only html or css or I really need java
The card always drops on the bottom only.
Thanks
Welcome
I haven't coded a day in my life, but I'm conceptualizing something like this for a business application I need to start due to a job loss. How do I go about using this in Dreamweaver?
I suggest you don't actually use Dreamweaver to code. I never heard or seen anyone using it professionally (maybe I'm just unlucky). Don't be scared by Visual Studio Code. It's really good, solid.
If you haven't coded a day in your life, don't start with advanced Javascript. Start with easy stuff. At least do a crash course on HTML and CSS, let it sink in, then start basic Javascript, then step up. It's essential to build fundamentals.
I wish you all good and thank you for considering joining this great world of developing.
When we drag up the box, this is not working. Please fix this problem...
any solution or suggestion for making clone drag and drop
I am not sure what you are asking?
hi buddy, how can i remove a child element of draggable item after the dropend executed successfully?
You should get a reference to the child object maybe a class then reference the parentNode.querySelector the child then remove it in dragend event listenre. Sorry if this doesn't make too much sense it's hard to explain over text.
thanks a lot!!!
How to create 4 box and box 1 contents can be dropabble in 2 and 3 but not 4, box 2 will be 1 and 4, box 3 will be 1 and 2, box 4 will be 1 and 3
Code available for download?
Wow!!!
why the variable draggedItem is defined null ?
anybody help me please??
but how add items
Great!
Thank's a lot
Hi I want to know can we print dragged text only please reply
did you ever made the trello clone?
Unfortunately, I did not but, it is something I may do in the near future.
It did not work; I get the message: "Uncaught TypeError: this.append is not a function
at HTMLDivElement." from the google console
But how to save?
First 3 minutes are super blurry
I thought that was just me 😬 looks fine before I uploaded to UA-cam... Must have messed up during processing... I'll try to fix it.
@@TylerPotts Appreciate that
I'm going to recommend that you do some practice videos before doing the one you post for public consumption.
it does not work
I am a beginner. And until now I don't understand "This" 😑
Woo!