Start learning with our library of video tutorials taught by experts. Get started

HTML5 First Look

Drag-and-drop API overview


From:

HTML5 First Look

with James Williamson

Video: 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.
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 First Look
4h 28m Beginner Aug 23, 2010

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.

Topics include:
  • 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
Subjects:
Developer Web Web Design Web Development
Software:
HTML
Author:
James Williamson

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked