HTML Drag and Drop API
ฝัง
- เผยแพร่เมื่อ 24 ส.ค. 2019
- Learn how to use the HTML Drag and Drop API, which enables applications to use the drag-and-drop feature (natively) in the browser, making it easier for developers to create interactive experiences for users!
Using The HTML Drag and Drop API, we can customize which elements can become draggable and/or droppable, and define the transferred data.
In this video, we use the HTML Drag and Drop API in order to create a simple Drag and Drop matching game. In the first few minutes, we build the structure and add the content and styling with HTML and CSS and we then proceed to implementing the Drag and Drop functionality with the help of drag-and-drop related events in JavaScript!
Enjoy 🙂
Don’t forget to share, like, subscribe and would love to hear your thoughts in the comment section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Code for Second Example: codepen.io/Coding_Journey/pen...
Code for Drag and Drop Game: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Voice Search with JavaScript (Web Speech API): • Voice Search with Java...
Font Awesome 5 Icons: • Font Awesome 5 Icons
Arrow Swipe Game with HTML, CSS and JavaScript: • Arrow Swipe Game with ...
Currency Converter with HTML, CSS and JavaScript: • Currency Converter wit...
Decide - Create - Publish - Repeat: • Decide - Create - Publ...
CSS box-shadow Editor: • CSS box-shadow Editor
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
This is pure genius. I'm a teacher trying to make educational tools on a tight time scale. These videos are extremely helpful, thank you.
Oh thank you for the nice words 🙏🙂 Very happy to hear that you find these videos helpful, especially for the purpose of creating educational tools!! All the best 💙
Amazing explanation!! Thanks mate 🍻
I Thank You for this channel. I love your way of teaching. Your movies learned me more than movies in my native language.
Thanks for the lovely comment and support, much appreciated!! Coding is our common language 😉🙂 Keep it up!!!
Simple and straight to the point! Thanks for teaching us =D
Oh thank you! Pleasure is all mine 🙂💙
Its always nice to go and try the most basic and important stuff. I was kind of stuck between one of my project due to this drang and drop feature, but this video saved me. Very nice explaination.
Oh thank you, my pleasure 🙂 Very glad you found this useful! All the best, keep coding 💙
I really appreciate you explain each item instead of just typing away.
Oh thank you, very glad you liked it!! 💙
Excellent project and tutorial!! Keep up the great work man 💖
Thaaaaaanks 🙂 Very glad you liked it! Will do 😉💙
Neatly explained, I like the editing of boring stuff and keep the training focused, going to checkout more videos on your channel
Awesome, very glad to hear that 🙂 Indeed I am trying to speed up the trivial parts and focus on providing as much information as I can...sometimes I'm happy with the result, sometimes not so much...but that's life 😁 welcome aboard!! 😉
Thats a brilliant tutorial. Everything is explained perfectly 👌👏
Oh thank you, very glad you liked it!! 💙
Thank you! It's an amazing project.
One of best videos on JavaScript us html by a master coder. Surprised at low views compared to lesser videos. Optimise video with tags for more views thanks
Oh thank you for the nice words 🙂 Very glad you liked it! Well, in general I'm trying to optimize, but in the end it is up to TH-cam algorithm to present the right video to the right people at the right time 🙂 Thanks again for the lovely comment! All the best 💙
Thank you so much. Your videos are always helpful and provide high-quality content. Your channel deserve 1 million subs. Keep up the good work bro. 👏
Brilliant! Thanks so much!
thank you so much
My pleasure 🙂 Very glad you liked it!!
Oct. 2021 CanIUse shows bright green across the board for all browsers. Awesome!
Thank you for sharing this tutorial. I need this to allow my website visitors to design their own product from a list of graphic elements. I still have a lot more to learn, but now I'm on the right track. Thank you! :)
Amazing! My pleasure 🙂 However, I think there are still issues with touch screens support...for example it still doesn't work on my mobile phone (Android). You can open the CodePen link to the final project (in the description) with a touch screen device and check if it works! Of course, if the website mainly targets desktop/laptop users this may not be an issue...just something to consider 🙂 All the best!!
@@CodingJourney Thanks for letting me know. I want to target both, desktop and touch screen users, but I'll find a work around, maybe an optional select form or something similar. Happy Coding! 😁
Thank's a lot :)
Very nice example and great explanation! Thank you.
My pleasure 🙂 Very glad you liked it!!
Thank you! Amazing explanation!!
Great! Very glad you liked it 🙂
Very cool video!
That was beautiful Sir! Thank you!
🙏🙂
Thank you very much for this fantastic lesson!
Ooooh thank you very much for this fantastic comment 😉🙂
very good work! excellent tutorial. This solved a lot of headaches. Thank you so much!!
Thank you for the lovely comment 🙂 Very glad it helped!!
Thanks, very lucid explanation.
nice video for making a page builder
Thank you very much! It's a very nice tutorial and I've learned a lot!
Amazing! My pleasure 🙂💙
just perfectly awesome, thanks, very helpful explaining
My pleasure 🙂 Very glad you liked it! Thanks for the lovely comment 🙂💙
How to drop a source element to certain position/co-ordinates of target element? I am not able to pass x,y coordinates to drag event.
Excellent!!! I really enjoy your attention to detail.
Oooh thank you very much! Glad to hear that 😉💙
@@CodingJourney One thing if you don't mind. In the style.css for .draggable I change the cursor to grab and I added .draggable:active and change the cursor to grabbing but, on hover over for .droppable.droppable-hover I tried to add cursor: grabbing but that doesn't work. Is there a way to do that?
Thanks for the tutorial. It's a great one indeed. I want to know how to remove the dropped elements from the dropable box. Thank you again
Where have declared the classes 'dragged' and 'dropped' in html. Can we give functions to classes that are not declared in html??
Thank you!
Awesome tutorial 🙏
Ooooh thank you 🙂 Very glad you liked it!!
Brother, I thank you so much!!!
Any time 🙂 Glad you liked it! 💙
how can I make it so I can undrag it from the droppable back to where it was?
fantastic !
🙏🙂
Hey man, im having some problems with the code "const" its reserved and I'm not sure what to do :/
excellent!!
👍💙🙂
Nice video bro but i have a ques, how i can pick a draggable values for save in the data base, thank you for the very nice content bro vibes:)
Great explanation
Oh thank you, glad you liked it!
This is brilliant! I am an absolute beginner so are there any other videos you recommend I watch before starting this? Also what editor do you use to write your code because atm I'm writing all my HTML on notepad:))
Hey thank you!! The code editor I'm using is Visual Studio Code...it's been my favorite editor for the past 3 years or so 🙂 Well you can learn by following/creating projects like this one (for example in the first project I've uploaded called "REST Countries API" I' getting into more detail, making it even more accessible to complete beginners, although maybe not as polished as this one 🙂) or you can search for HTML/CSS/JavaScript/Web Development crash course in TH-cam and I'm sure you will find amazing content from amazing teachers 🙂 All the best, keep coding 💙
@@CodingJourney Thank you so much!
Amazing video love it !!
But how could i change the image to what image i would like?
I'm working on same project for my final year as a examination system for kids but I want system to reject wrong drags after submitting can you help please.. Any source code please
Hello Sir, hope you are well,
can i use custom designed icons, saved as gifs, jpegs, and can i use offline
Did you figure this out?
thanks
Thank you so much!
Totally my pleasure! Glad you liked it 🙂💙
@@CodingJourney Hey, can I ask if I can use image I drew instead of fontawesome icons in this API... I tried replacing it but the drop does not work. :((
Nice explanation Many thanks for sharing
Is it a way to have 3 or more icons in the same box?
Daniel
Could you please make a video about how to do it for mobile :)
bravo
its amazinggg, i wanted to ask if your code utilizes DOM in the js
Oh thank you, glad you liked it 🙂 Yes, of course! All the best, keep coding 💙💙
How can I make the elements linked to PNG images instead? Thanks for your tutorial!!
Hey Rory, glad you liked it! Nice channel btw!!
In order to use PNG images instead, let's suppose that you have your images in a folder called "images".
In the HTML file:
In "draggable-elements" e.g. instead of
use:
In JavaScript file you only have to make small modifications in the "drop" function. So instead of:
event.target.insertAdjacentHTML("afterbegin", ``);
you could use:
event.target.insertAdjacentHTML("afterbegin", ``);
or, if you don't need the span text to be displayed anymore:
event.target.innerHTML = ``;
You also probably don't need to change the background color so you can remove the event.target.style.backgroundColor = ...
Or maybe you do, totally up to you, there are literally countless variations.
Finally you will probably need to make changes in the CSS file, that's up to you of course. For example instead of:
.droppable.dropped i {
pointer-events: none;
}
you could change it to:
.droppable.dropped img {
height: 4rem;
width: 4rem;
pointer-events: none;
}
and, in case you are not changing the background color, you don't have to change the span text color to white, so that it will still be visible. So in:
.droppable.dropped {
border-style: solid;
/* color: #fff; */ - you don't need this
}
There are always many ways to approach a problem, hope this helps! All the best, keep coding 😉🙂
Hello sir, what if I want every image has its own different sizes, how do I make it happen?
Hey do you have any idea about touch events or pointer events?
Hey man what's up! A while ago, I've uploaded the "Arrow Swipe Game" using touch events. In order to also make it work with mouse events, I also added the corresponding mouse event listeners and used the same event handling functions. The Pointer Events API specifies a way to handle mouse, touch and pen inputs at the same time, without having to code for separate sets of events, mouse events, and touch events. So if instead, I used pointer events (which unify mouse and touch events) I wouldn't have to define separate event listeners. However browser support for the Pointer Events API is not quite there yet and therefore I'm not sure I would feel comfortable enough to use it in real life projects!
@@CodingJourney Thanks for the reply, I will check out the video.
Hi im sorry im really new i dont understand how you get those images to show up at 5:14 mine only shows the text. Instead of the fontawesome images im using .svg files hosted on a dropbox folder and using that link. do you think you could help? im also using codepen.io to write
sorry i worked this out and i was stupid.thanks for the video its really great abnd infomative
Amazing! Very glad it eventually worked 🙂 Thanks for the nice words! All the best, keep coding 😉
@@CodingJourney Thanks, do you have any help on trying to get the boxes that you drop in to run horisontally instead of vertically? I've been messing around with the CSS and I cant find a good way to do it?
There are always many ways to achieve something...one way is to set the container of .droppable elements to flex so:
.droppable-elements {
display: flex;
justify-content: center; /* or space-around or space-between */
}
and you may also have to change the following in .droppable, depending on what you want to achieve:
.droppable {
margin: 1rem; /* instead of margin: 1rem auto; */
}
Also in this case, you may also want to make sure that it looks good on smaller screens. Good luck!!
Coding Journey Thank you so much !
i need help in drop event , please help me
can you please show how to show the score or result of the above example demo? thank you
Hey! There's a link in the description to the Drag and Drop Game code. Nothing special is really required, just in the drop event we could check whether the drop is correct and increase the corresponding counters...feel free to check it out! All the best, keep coding!! 🙂
I tried the code, everything works except for dog... I don't know why
Hey! Maybe the dog just doesn't feel like working...😁 Horrible humor, I know 🙂 You can find a link to the project in the description, in case you want to compare with your code! All the best, keep coding 😉
This is exactly what I am looking for, Can you please help in building a drag and drop function for my website?? Please let me know. Thank you. Mimi
Hiiii 🙂 Wish I had the time 😢 I'm creating these videos so that you guys can go ahead and apply the knowledge, according to your needs! You can try and implement the specific part of your webpage and send me the link (e.g. in CodePen) and I could have a look, although I'm quite certain that if you try, you will eventually figure it out on your own 😉 All the best, keep coding!! 🙂
@@CodingJourney You havent made use of the 'DataTransfer.dropEffect' and 'DataTransfer.effectAllowed' properties. In your vid the browser did display a small label next to the cursor while dragging. This has to be to the properties stated above. My issue with this is that non of my browsers display this message. My question to you is if you still see this message on the latest browser versions? Or has it been silently been removed?
Are you a Greek ? :)
thanks for the tutorial !!!
Μα πώς το κατάλαβες, είναι τόσο έντονη η προφορά μου? 😁😉 Από Κύπρο για την ακρίβεια! Εσύ?
@@CodingJourney Aπο ελλαδα!
Δεν ειμαι η κοπελα στην φωτο, για την ακριβεια ειναι η πρωην μου και εχω το "καναλι" της, θα σου στειλω στο Τwitter του καναλιου για ενα θεμα που με απασχολει, δεν θα σε ενοχλησω πολυ :D μπορω;
Το υπέθεσα ότι δεν είσαι κοπέλα από τα κανάλια που ακολουθείς 🙂 Αν είναι κάτι το οποίο απαιτεί χρόνο, δύσκολο, καθώς με βρίσκεις σε περίοδο που ο χρόνος μου είναι πολύ περιορισμένος. Στείλε email άμα θες αλλά δυστυχώς σε αυτή τη φάση δεν μπορώ να εγγυηθώ άμεση απάντηση!
I have checked in my mobile it's not dragging.Could you share code which can be used in mobile devices.
Hey, thanks for watching! Here (26:20) is the part where we discuss browser support for the HTML Drag and Drop API. In short, while browser support for desktop browsers is quite good, for mobile phones it is not quite there yet. So in that case a different approach is required in order to ensure that DnD works as intended. For example, we can use touch events in order to replicate the DnD behavior. In an older video called "Arrow swipe game", I'm using touch events, however I haven't uploaded yet some video specifically implementing the DnD functionality for touch screens from scratch...
@@CodingJourney thank you
@@CodingJourney Please do!
Bro I need the same code for a smart touch board. I'm a teacher, i hope you can help.
Hello, thank you so much, please is it possible to copy/paste a ficture and save it
Hey man! Very glad you liked it 🙂 Ficture? You mean picture? I don't quite get what you want to do here, can you elaborate?
So I want to cut a part of zone and paste it a contenteditable for example
So you want to copy stuff to clipboard and then paste? That would be an interesting project but it is almost completely different to what we are doing here. Maybe using the Clipboard API would be the way to go...unfortunately I don't have a specific answer to your question...All the best man!! Keep coding 😉
why wont it work for me i cant figure it out
same :(
hi,its very helpful...kindly share a code description link.
Hey! Thanks, glad you liked it 🙂 There is a link to the code in the description. All the best, keep coding!!
can you sent this code?
Hey man, there is a link in the description!
see later ...
That's not a bird that's a frog 🤣🤣
plz.... Please make a subtitle TT
six
You get wonderful reviews but how could this take 29 minutes? Im sorry but for something so simple I can not watch this as I dont have that sort of time. Please consider a much shorter tutorial.