Easy Drag n Drop with JavaScript - how to code tutorial

Подписаться 58 тыс.

Просмотров 70 тыс.

50% 1

Learn how to code an awesome drag and drop feature into your website easily. In this tutorial you will learn how to use the HTML5 draggable, javascript event listeners and javascript the drag event API to create a Trello like web application.
Day 77 #100DaysOfCode
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
|===============================|
SUPPORT ME ON PATREON:
/ tyler_potts_
|===============================|
Github: github.com/Tyl...
Discord: / discord
Twitter: / tyler_potts_
Music: www.bensound.com - Creative Minds
#JavaScript #Vanilla

Опубликовано:

15 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 118

@TheCompleteGuitarist 4 года назад

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 :)

@geemanrocks5314 4 года назад

I like the video , but having a hard time , I will keep at it.

@donaldbradbury1100 4 года назад

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.

@riceboom360 3 года назад

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.

@skolotoi4588 2 года назад

Thanks a lot, Tyler!! 🤟

@TylerPotts 2 года назад

Any time!

@alis9389 2 года назад

thank you thats exactly what i needed. thank you so much

@TylerPotts 2 года назад

You're welcome!

@davidmorrow1393 3 года назад

Impressed at CSS mastery. Drag and drop seem so simple.

@TylerPotts 3 года назад

Thanks!

@billalhossain2179 2 года назад

Very Helpful. Thanks for the video

@bernardoapelt 5 лет назад

Thanks a lot for posting and take your time , it really help!

@TylerPotts 5 лет назад

I'm happy it helps that's the aim! To build a community for new web developers to learn and grow.

@keduslejiyared8701 3 года назад

I never knew your videos were both very educating and easily understandable 🙌🏽😁. Thank you for this amazing video.

@TylerPotts 3 года назад

Thank you! :)

@karlduckett 5 лет назад

Great content! I took a little break from coding but back now :) I have a few of your videos to catch up on!

@TylerPotts 5 лет назад

Haha awesome I hope you enjoy! Thank you!

@erikkostic8271 2 года назад

I liked that video very much. Thank you

@TylerPotts 2 года назад

Happy you liked it :D

@mrrose3796 3 года назад

I got it to work eventually. I had to change the last "this" in the nested for with the list looping variable

@stevensmith5626 Год назад

Fantastic! Keep up the good work

@rostyklukavyi7828 3 года назад

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!

@h0ckeyd 4 года назад

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!

@ryanwoods3333 3 года назад

great video mate. love these

@TylerPotts 3 года назад

Glad you like them!

@glenndivinagracia3645 4 года назад

Very helpful. Thanks for walking us through with the explanations.

@JH-hr6fw 3 года назад

Sick video brother! loved it. Also you did an excellent job at explaining so thank you very much

@TylerPotts 3 года назад

Glad you liked it!

@erenenadream 4 года назад

Which theme do you use ? Your syntax looks great

@TylerPotts 4 года назад

I think this was Material theme using the material icon theme!

@mehmeteminsaym7179 3 года назад

Very very nice. an educational video. Thanks.

@tetteishahday-annang3120 5 лет назад

Thanks taking your time to make these awesome videos 💙

@TylerPotts 5 лет назад

Thanks man, I appreciate the comment and I will always take time to make videos! 😁

@tetteishahday-annang3120 5 лет назад

@@TylerPotts Great... 💙

@nykfeng 2 года назад

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!

@TylerPotts 2 года назад

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.

@nykfeng 2 года назад

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

@ellenfogarty5449 4 года назад

Thanks for the video. What colour theme are you using for VS Code? It's so nice!

@agiksetiawan3227 4 года назад

Thanks for share this tutorial. Helpfull

@ilovepishang 2 года назад

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!

@Draftpull_programming 2 года назад

thanks alot for your effort

@kevinrauer 5 лет назад

Very very nice.. Thanks for a nice and simple walk through!! How about a expansion to a Tree type interface??

@TylerPotts 5 лет назад

Sounds good I'll look into it!!

@osloren5614 4 года назад

Oh! realy easy. Thanks a lot

@TylerPotts 4 года назад

Most welcome 😊

@iftekharrahman8100 4 года назад

Hi, is that draggable on mobile devices?

@iSkvort 2 года назад

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?

@theexposer9483 2 года назад

What sort of drag and drop is this where we start things with writing lines of code?

@durangodave 4 года назад

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...

@dmytro629 4 года назад

Wow!!!

@md.belalhossain 3 года назад

Thanks

@TylerPotts 3 года назад

Welcome

@juniord_osbel 4 года назад

Thanks a lot!! Good job!!

@DenniS-qr3nn 3 года назад

great !! thx~

@TylerPotts 3 года назад

@pablohernandez4305 4 года назад

Thanks for this video, great tutorial

@ronidey7100 4 года назад

Great tutorial👍 Thanx!!

@yellemonster 4 года назад

Are you still planning to do the Trello clone?

@TylerPotts 4 года назад

Ooo hell yeah I am, I completely forgot!

@yellemonster 4 года назад

@@TylerPotts Obviously it's your channel, so it's for you to decide. But it would be especially awesome, magnificent, and god-like if you did it in vanilla Javascript :D That being said, Vuejs is also great. Thanks for the work you and all the other teachers of the world do. The world is better for it:)

@rahulbane7241 4 года назад

@@TylerPotts Hey Tyler, really need help on that trello code

@MrBeastFan_Gyak 3 года назад

thx for video man !!!!!!!!!!

@fxstreamer238 5 лет назад

how did you remove the forbidden sign when you drag with cursor?

@Shakespeare1612 3 года назад

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.

@xoxo2880808 3 года назад

thanks a lot!!!

@SeluHadu 5 лет назад

I had to watch 5 videos to check if RU-vid was messing up the video or the video is blurry. BTW good video.

@TylerPotts 5 лет назад

I think RU-vid messed up the processing for the first 3 minutes but thanks man!

@AjayKumar-wk8kn 4 года назад

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.

@hassainehassen5700 4 года назад

Thanks , and i need to add 3 more column in second row can you please help me ?

@No-pn4uu 4 года назад

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?

@Rezafarhangian 2 года назад

great💙💙💙💙

@Gwhizzman1 4 года назад

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?

@BHFJohnny 4 года назад

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.

@HilalAydin38 4 года назад

Thank's for good video

@arnavdixit1397 4 года назад

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?

@qili3970 4 года назад

this is awesome!!!

@alphasiera1757 4 года назад

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

@terje-andreriis55 3 года назад

how to get the position where the item was placed ?

@bikramchettri9405 5 лет назад

Thanks for this.

@TylerPotts 5 лет назад

Anytime, I enjoy doing it.

@bikramchettri9405 5 лет назад

@@TylerPotts Thanks man. Awesome tutorial.

@bikramchettri9405 5 лет назад

@@TylerPotts Hey thanks for the tutorial can you please explain date object in javascript and then show how to create a datepicker?

@TylerPotts 5 лет назад

Nice idea. I will look into this for you. :D

@TylerPotts 5 лет назад

This should hopefully be tomorrows video if everything goes to plan. :D

@codercoder7270 4 года назад

What about positioning and sorting ?

@xiaokourou 4 года назад

Great!

@tsaiandy221 4 года назад

I think requestanimationframe is more functional instead of settimeout

@VedPrakash-zh1dd 4 года назад

When we drag up the box, this is not working. Please fix this problem...

@bhupiiidx8406 4 года назад

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

@anirudhkumaran83 5 лет назад

any solution or suggestion for making clone drag and drop

@TylerPotts 5 лет назад

I am not sure what you are asking?

@danneytee 2 года назад

hi buddy, how can i remove a child element of draggable item after the dropend executed successfully?

@TylerPotts 2 года назад

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.

@yasmineaboudrar4932 4 года назад

Thank's a lot

@farooqnadaf3950 4 года назад

Hi I want to know can we print dragged text only please reply

@tiendungnguyen158 4 года назад

how to change position 2 elements which both in a colume?

@dnxsol 4 года назад

what happened to the Video on making this dynamic?

@ShortSportShort 4 года назад

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.

@VedPrakash-zh1dd 4 года назад

The card always drops on the bottom only.