Drag-and-drop API overview
Video: Drag-and-drop API overviewIt would be great if everything in the HTML file specification was implemented by browsers evenly across the board, and met with the widespread approval of the design and development communities, but that simply is not indicative of how the real world works. Nowhere is that reflected more in the HTML file specification than with the current implementation of the drag-and-drop API. Now the drag-and-drop API is native to the HTML file specification and describes what really is a very basic user interface construct.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Drag-and-drop API overview
It would be great if everything in the HTML file specification was implemented by browsers evenly across the board, and met with the widespread approval of the design and development communities, but that simply is not indicative of how the real world works. Nowhere is that reflected more in the HTML file specification than with the current implementation of the drag-and-drop API. Now the drag-and-drop API is native to the HTML file specification and describes what really is a very basic user interface construct.
dragging elements from one location and then just dropping them in another, because this interaction is one of the fundamental pieces of so many application interfaces, it's a very important part of the HTML file specification. Currently, it's also one of the more maligned and unevenly implemented parts of the specification as well and it's sort of unfortunate, but before we get into the pros and cons of the current specification, I want to give a quick overview of the drag-and-drop API and how it works. The API is actually based off of Microsoft's drag-and-drop implementation, which has been included in Internet Explorer since version 5.
Since both IE and Safari used this API, it was deemed a logical starting point for the HTML5 specification. If you're really curious, you can go read in Hixon's record of attempting to reverse engineer on Microsoft's standard on the Web. Trust me, it's actually pretty funny. Now drag-and-drop works by first declaring an element being draggable basically. It says, hey, you are draggable, then it defining a drop target for it, and then using the drag-and-drop API to control the interactions between the two. Here is a very simple walkthrough of the process.
First, you define an element as being draggable by assigning it a draggable attribute. Links and images are draggable by default and in Internet Explorer actually, only images and links with an HREF attribute are draggable. Now you can also specify whether the dragged object is to be copied, moved or linked, which is pretty cool actually. Now to enable the drop, you need to define a drop target, which must in turn listen for at least three events in the drag-and-drop API.
Those are dragEnter, dragOver and the dropEvent. There is also an optional dragLeave event. Now we are going to talk more about those events in just a moment. A critical point here is that the dragOver event, and this is really important, must be canceled before the object will be allowed to drop. So there is a method that often the only thing you're doing with it is canceling it, so that the user can let go with the darn thing. When dragging-and-dropping, you can also transfer data between the drag and target objects. You do this by using the drop event's dataTransfer property.
You can use the set data method in the drag start event listener and the getData method to retrieve that data in the drop event handler. When using set data, you would set the format of the data and then the value of the data itself. For example, if you're dragging text, you would set the value to text plain and then pass the string value of the text. There is also a mechanism for passing a list of files, if files are being dragged. So if you are creating an application, you can literally drag-and-drop files from one location to another.
Now if you think this sounds kind of simple, I assure you that it is not. The reality is that there is a tremendous amount of moving parts and varying levels of complexity to drag -and-drop interactions that has not exactly gone unchallenged. In 2009, noted browser compatibility expert Peter Paul Koch threw up his hands in surrender trying to test the drag-and -drop specification across multiple browsers. Now his rant, while humorous, and I feel like I should warn you, a bit PG-13 if you are inclined to read it, it does explain very clearly the frustration felt among many developers who have attempted to adopt the standard.
Now currently the standard is supported in Firefox 3.5 and above, Safari 4.0 and above, Chrome 4.0 and above, and here is the funny thing, even though it's based off of it, partially in Internet Explorer 7.0 and above. Yeah, that's right. The browser that the specification is based off only partially supports it. That's sort of ironic. Now it is important to point out that as of this recording, even browsers that support the specification have differences in how drag-and-drop is implemented among them. So yeah, the HTML5 drag-and-drop API can be a bit of a challenge to integrate into your own projects.
So why should you bother? Well, there are some compelling reasons to use it. Now first, it would be native to the browser. So in theory, you won't have to resort to using third-party libraries like jQuery in order to get it to work. Second, the HTML5 drag-and-drop API does something that the other third-party libraries don't. It allows you to integrate interactions with other applications. So your users could, say, drag something from the desktop into your browser. Now currently, that isn't possible using other solutions. That is a huge selling point.
Now if you are interested in learning more about HTML5 drag-and-drop, I want to recommend a few resources that's going to help shed some light on it for you. First, you can view the spec itself on the W3C's site. Second, I recommend an outstanding article by Zoltan Hawryluk, I believe, on his blog outlining how to implement the drag- and-drop API in a cross browser friendly way. Mozilla's developers blog also has a very nice article on using the drag-and-drop API as well, so you might want to check that out.
Now if you are looking for a few demos of drag-and-drop and you want to see it in action, I recommend Mozilla's Leslie's Orchards drag-and-drop demo page, and Remy Sharp's drag-and-drop demos on the html5demos.com site. those are both really, really good demos. The drag-and-drop is such a fundamental part of application interfaces it's really easy to see why so many in the web community are passionate about it and there are a lot of passionate voices going back-and-forth. So currently, there is a lot of concern over the way this specification is written and how it's being implemented within browsers.
Now hopefully, this level of concern will continue to influence the specification and its adoption in the future, so this is one area of the HTML file specification that it wouldn't surprise me if it undergoes some very serious changes from now until candidate recommendation status. So that's something you're definitely going to want to keep your eye on.
There are currently no FAQs about HTML5 First Look.