JavaScript - Drag & Drop Files & Elements

This video will show you how to drag and drop files and HTML elements with JavaScript, including how to use a plugin to add support for touchscreen devices too.

00:00 Intro
00:31 Drag and drop files
03:14 Drag and drop elements
06:24 Using a plugin
09:04 Outro

If you enjoyed this video, don't forget to leave a like and subscribe for more content still to come!

#javascript #dragdrop

[AzulCoding]

💻 All the code in this video is available on my website:

[harez]

Exactly what i was looking for !! Thank you !

[qehejsp]

You really help me, thank you so much

[lifeatweb]

Show!!! muito bom! muito didático! Parabéns! Obrigado por compartilhar seu conhecimento conosco!

[weddingmoments]

Many thanks for the excellent tutorial. But I want to make two more enhancements -
1. After I drop one box in the drop zone, the original drop box will remain in it's place, but will be 50% transparent. And it's replica will be moved into the dropzone. OR you can think opposite way as well, the original box will be moved into the dropzone and a replica will be created in the original location with 50% opacity. This is just to show that the box was originally there, but it was moved.
2. There will be a small delete icon on the top right of the boxes after they are moved into the dropzones. If we click the delete icon, the box will be deleted from the dropzone and the same box outside the dropzone will be fully visible. So essentially we don't have to drag the box from the dropzone to outside, but just delete icon will do it.
How can we do it? Any reference please? Will be really thankful.

[siddharthchauhan]

please urgently help and tell me how do I enable dragging the element onto another element which is not of the same type, such that the text inside doesn't change...and stays the same