Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Drag-and-drop API overview

From: HTML5 First Look

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.

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.

Show transcript

This video is part of

Image for HTML5 First Look
HTML5 First Look

50 video lessons · 74447 viewers

James Williamson
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.