Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Detecting drag and drop support
- Using the HTML5 draggable and dropzone attributes and onDragStart event
- Exploring different events
- Receiving drops with or without a drop zone
- Creating a simple game
Skill Level Intermediate
The first step in implementing HTML5 drag and drop is to register an event listener. So we are going to start by making a working copy of this file right here, 02-listening-start.html. So I am going to go ahead and I am going to just drag that and hold down the Ctrl key here on Windows and you can do the same thing with the Option key on a Mac and that will make a copy, and then I am going to go ahead and rename that to make it just say -working.html.
So down here in the HTML part you can see there are two images and they are wrapped in divs. There is a Rock.png and a DropZone.png image and you will notice I have the draggable attribute equals true for the Rock and false for the DropZone image. I have an id in the div class for the DropZone image that's id=dz1. That's a number 1. That's not a letter L. And the same thing for the image. It's got an id. This is in the image tag on this one and it's img1 is the id there.
So because this element function returns an object I can go ahead and dereference right off of the function with that dot there. And the event listener takes three arguments. The first one is the name of the event, which is dragstart. The second one is the event handler itself, which in this case we are just going to reference the function by reference and say handleDragStart. We could if we wanted to put an anonymous function here as well. And the third one is whether or not it's going to bubble and we're going to say false. It is something that it's a little bit complicated.
It has to do with how events propagate, either top-down or bottom-up, and bottom-up is the old way of doing it and top-down by some people is considered better and the problem is if you count on it being top-down, half the browsers in the world aren't going to understand you. So everybody just puts false here so that it does what it has always done, which is bubble top up. And if that doesn't make any sense to you, that's okay. Its' not really that relevant here. I am just kind of telling you what that third argument is for and why you will pretty much always see false there.
So now we've registered our event handler and we have our event handler function right here, the handleDragStart event, and so I am going to go ahead and save and reload in the browser. And now when I grab this, you see it says drag started, and that means that that event got fired because that's this message right here. So we are successfully registering an event. I mean it doesn't do much at this point, but we are successfully registering an event and that event is getting-- that function is getting called when the event fires.
The event listener model is a basic concept for using HTML5 drag and drop. Once you understand how to do this, that is, to register an event and to write a function to handle that event, then you can go ahead and implement all the events that are supported by HTML5 drag and drop.