Everything HTML5 Drag and Drop

This extensive tutorial discusses the basics, intermediate and current updates to the HTML5 Drag and Drop API.
Code from video: gist.github.co...
MDN drag and drop reference: developer.mozi...
Browser support: caniuse.com/dr...

[@rajatetc]

Was just exploring drag and drop for a project. Thank you for the tutorial. One quick question - can we somehow remove that green plus icon while performing drag?

[@SteveGriffith-Prof3ssorSt3v3]

With the property ev.dataTransfer.effectAllowed inside the dragstart event function developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed we can say what the user is allowed to do with it. By default "all". If this is set to "none" then the cursor stays as a regular cursor over the drop zone... but the user is never allowed to drop the item. The property ev.dataTransfer.dropEffect can be set in the dragover or dragenter listeners. developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect "copy" is the default and it will add the green circle with the plus to the cursor. "move" shows the normal cursor "none" has the same effect as setting effectAllowed to "none". "link" shows a curved arrow indicating the creation of a link between the old and new elements. Of course.... the actual appearance based on the dropEffect value will vary between browsers and you cannot change what they show.

[@rajatetc]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much for the detailed reply. I really appreciate it.

[@cferdinandi]

I love that you have "dragons" as the things that are "draggable" in this video, Steve! 😂😂😂

[@devstefancho]

I've watched many videos on this channel, this video is somewhat longer than others, But I've never got bored, I can bet This is the best video for Drag&Drop on KZbin. I hope in the future you deal with React or any other frameworks specially about Drag and Drops

[@intellis]

Thanks for the video and explanation. Nice opportunity would be a video with sortable items in a list and/or flex div 👌🏾

[@charlene6306]

Stopped video at 5:46. JC, you're good. It's so rare to find such a professional approach to teaching on YT. I'd harassed a guess that you are a professional, trained teacher. Anyway, let me finish watching

[@SteveGriffith-Prof3ssorSt3v3]

My full-time job is as a professor teaching web and mobile design and development. 😃

[@charlene6306]

@@SteveGriffith-Prof3ssorSt3v3 It really shows.

[@caiorobertodasilvavercosa6600]

Bro doing nice tutorials and lowkey sounding like Walter White nice

[@heatvisuals]

Awesome!!! Going to try drag and drop web dev stuff today !!

[@StijnHommes]

Now, THIS is actually useful.

[@abdurrakibrony_518]

Always Educational😘

[@joboujp]

Nice tutorial. Do you know a way of keeping the draggable element from leaving the browser window ?

[@SteveGriffith-Prof3ssorSt3v3]

Dragging images outside the window is a desirable behaviour. We want to be able to drag to another application. However, the dragend event doesn't fire on all browsers and OS if it happens outside the window. So, if you want to know when the user leaves the window you need to use the drag event and track the x and y coordinates of the event. const x = event.clientX; const y = event.clientY; Then you can check if the number is less than zero or greater than the window width or height. if (x < 0 || x >= window.innerWidth || y < 0 || y >= window.innerHeight) { console.log('Item dragged outside the window!'); }

[@RicardoManuelArana]

Could I have a little hand from you, Steve?. I'm trying to accomplish the code below but for some reason, the thumb lags and it's slow, I'd appreaciate if you could fix any mistake of mine, I'm new to dragging elements. I need this to make use off e.offsetX since it works within the dimensions of an specific element. Keeping the percentage when modifying thumb.style.left. By the way, I have an intelcore i5 with 8gb ram. So I don't think the blame's on my processor. * { margin: 0; border: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .seekbar { position: relative; width: 90vw; height: 3vh; background-color: darkmagenta; border-radius: 13px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .thumb { width: 3vh; height: 3vh; background-color: blue; border-radius: 50%; position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%); } var seekbar = document.body.getElementsByClassName('seekbar')[0]; var thumb = document.body.getElementsByClassName('thumb')[0]; function stopMotion() { seekbar.onmousemove = null; } function startMotion(e) { var position = e.offsetX * 100 / seekbar.offsetWidth + '%'; thumb.style.left = position; thumb.onmouseup = stopMotion; } function processMotion() { seekbar.onmousemove = startMotion; } thumb.onmousedown = processMotion;

[@BadmintonAllOut]

Sir.. I have 2 images with the same width and height, the PNG image is covering the JPG image because i use the PNG image as the frame for the JPG image. I can zoom/resize the JPG image by tapping without PNG over it but i can't zoom/resize when the PNG image is over the JPG. Is it possible to zoom/resize by tapping the JPG image although this image is under the PNG image with the same size? Could you help me to solve it? Thankyou.

[@SteveGriffith-Prof3ssorSt3v3]

Not sure what you mean about using one image as the frame for another. But CSS is how you control image sizes.

[@jonahssegawa472]

In particular where are these types and kinds coming from yet we only set application/json and that's the one i would expect, where are the drag types coming from??

[@SteveGriffith-Prof3ssorSt3v3]

Things like 'application/json' are MIME types. You as the developer set the value for what is being dragged.

[@vmars316]

Please do a Tutorial on Drag-Drop Elements (Multiple-Images) ANYWHERE on Page . I am a subscriber . Thanks

[@SteveGriffith-Prof3ssorSt3v3]

This tutorial is about dragging and dropping any number of elements. If you are talking about dragging things out of the browser or into the browser, that is not supported everywhere.

[@jonahssegawa472]

Steve please I need some clarification on what is returned from the drag transfer object

[@SteveGriffith-Prof3ssorSt3v3]

It is the mime-type that you are assigning to the data that is being transferred. It is a mime-type. You usually set the data yourself. You pick the data and the type. You set the data and the type. application/json and text/plain are the two most common. developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

[@programmingwithdipayan7280]

Wow.... Thank you for this ✌️

[@mimosveta]

I don't know what it is about drag 'n' drop, but few years ago, I attempted to find a tutorial to implement it, and found a few, but couldn't follow any of them. in the end I made some drag 'n' drop on my own. Even today, when I see a drag 'n' drop tut I try to watch, in hopes of figuring out if what I did was any good or if I should change it, and I still can't focus on it. why is it so horrible to follow?!?

[@SteveGriffith-Prof3ssorSt3v3]

Different people have mental barriers for different topics. Something that immediately makes sense to you might take someone else weeks to grasp. It's not drag and drop itself that is the problem. Just keep coming back to it after a break. It will eventually click for you

[@RockAristote]

Are you a drag king?

[@devstefancho]

in the description, MDN reference link is wrong, you made duplicate your gist :)

[@SteveGriffith-Prof3ssorSt3v3]

thanks! fixed.

[@lowEndAppsAndGames]

🎩 😁 👕👍Great! Vid 👖

[@vmars316]

* Thanks BUT What I really want to know is "how to Drop an image AMYWHERE om Page" Can you help me out with that ? pure js no links to other web stuff , Or can anyone else aim me at a Tutorial that can Help ? Thanks

[@SteveGriffith-Prof3ssorSt3v3]

That is what this tutorial shows. Set up whatever you want as the drop zone.