HTML5: Drag and Drop in Depth
Illustration by John Hersey

Exploring a sample drag-and-drop application


From:

HTML5: Drag and Drop in Depth

with Bill Weinman

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Exploring a sample drag-and-drop application

Most common demonstrations of HTML5 drag and drop use some form of a shopping cart application. While this seems an obvious choice, I didn't find very many actual online shopping sites that are using HTML5 drag and drop for the shopping carts. So I decided instead to demonstrate this interface using a simple game. This seems to be a more common application for this technology. So here we have the simple game. It's called Rock, Paper, Scissors. It's a children's game. I played it when I was little and most of the people that I know played some form of it when there were little, and it works like this rock beats scissors, because a rock can crush scissors.
please wait ...
Watch the Online Video Course HTML5: Drag and Drop in Depth
1h 0m Intermediate Jul 26, 2011

Viewers: in countries Watching now:

Join Bill Weinman as he shows how to make just about any web page element draggable with a combination of JavaScript and HTML5, a technique that has increased browser support and that eliminates the need for external libraries such as jQuery. The course covers how to detect drag-and-drop support in the user's browser, code a simple event listener, use a drop zone, and even receive dropped objects without a drop zone. A simple working example game, a practical implementation of drag-and-drop that can be applied to almost any web site, is also demonstrated.

Topics include:
  • Exploring the HTML/Javascript/CSS/DOM relationship
  • 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
Subjects:
Developer Web
Software:
HTML
Author:
Bill Weinman

Exploring a sample drag-and-drop application

Most common demonstrations of HTML5 drag and drop use some form of a shopping cart application. While this seems an obvious choice, I didn't find very many actual online shopping sites that are using HTML5 drag and drop for the shopping carts. So I decided instead to demonstrate this interface using a simple game. This seems to be a more common application for this technology. So here we have the simple game. It's called Rock, Paper, Scissors. It's a children's game. I played it when I was little and most of the people that I know played some form of it when there were little, and it works like this rock beats scissors, because a rock can crush scissors.

Scissors beats paper because paper can be cut by scissors and paper beats rock because well, something has to beat rock and paper covers a rock. And so the way this works, you'll notice there is a little status line up here and it says using HTML5 drag and drop and that's the results of the test to see whether HTML5 drag and drop is supported by this browser. If it is, it displays that message. This is a little status bar. And so when I pick up one of these items, I am going to grab the rock, you'll notice it says Drag Rock because I picked it up and it's in drag mode, and if I hover it over the paper you'll see it'll say Hover Rock over Paper, so it's a little status that gives us an idea of what events are being fired when.

If I let go over the rock over the paper, you'll remember that rock does not beat paper, paper beats rock, and so it says rock does not beat paper and if I drag the rock over the scissors, see now it says Hover Rock over Scissors and if I let it go it says Rock beats Scissors, and the rock and the scissors they swap places. The rock takes the place of the scissors because it won. And so the paper can beat a scissors-- Actually paper does not beat scissors. Paper beats rock and scissors beats paper, and so we see how the game goes.

We can also see it in each of these different browsers that I have loaded. Here's Internet Explorer. You'll notice that we don't get the same animations. We don't get some of those nice CSS3 effects like the image shrinking and the image being used, being dragged along with the cursor. These aren't supported in Internet Explorer, but the game works, as you can see, and so we get the same results and we get the little messages in the status bar there.

We get a pretty complete implementation in Firefox. You see we get the CSS3 effects and the game also works. Safari uses pretty much the same code for a lot of its browser as Google Chrome does. In fact, Google Chrome is based on the WebKit engine, which is mostly written by Apple for Safari. It's based originally on an open- source browser, but in any event we'll see that this works pretty much like Chrome does and Firefox as well.

Finally, we'll take a look at Opera and you'll notice that our status message here says "This browser does not support drag and drop" and so the game doesn't work at all in Opera. So let's take a look at the code that makes this happen. We'll look at this code in a lot more detail when we get to it in Chapter 3. But for now just so that you can see what's involved here, we'll take a look at this as a kind of an overview and then through the rest of the course we'll get into the details of how all of these features work. So this is the HTML file and it has all of the JavaScript in it.

It's almost 200 lines of JavaScript, which may sound like a lot but it's really not. It's not that bad at all. Up here at the top of the JavaScript we have some variables and you'll notice this little associative array or as I call it a hash. It has what beats what. Rock is beat by paper, paper is beat by scissors, scissors are beat by rock. And then as we scroll down, you see the function detectDragAndDrop and this test to see if drag-and-drop is supported by your browser. We'll get into that in the next chapter in more detail.

Here is all the event handlers. We have handleDragStart, which handles the start of the drag event. We have handleDragEnd which handles the end of the dragging, handleDragOver, handleDragEnter, handleDragLeave. These are handlers for when an object is dragged over another object, and we have handleDrop, which handles the drop event itself, and ends up calling the function isWinner to determine which object wins the little contest there.

And then in our utility functions there is the isWinner function, which is very, very simple as you can see and that's really the whole logic of the game right there. And then there is getRPSFooter, getRPSImage, getRPSType and swapRPS. RPS stands for Rock, Paper, Scissors, and these are just functions for dealing with the various HTML elements and getting their DOM representations for different purposes within the code. We'll get to all of this in a lot more detail later on. There is the swapRPS, which swaps the images when somebody wins, and some simple utility functions and under App lifetime support we have the init function which tests the drag and drop, and you see here is our message, this browser does not support drag and drop, and up at the top here using HTML5 drag and drop for when you do have it available.

And then finally down at the bottom this is really all the HTML that's involved. All the formatting happens in CSS and so really this is all there is to it. So let's take a look at the CSS file real quickly. I am going to just go ahead and open and we'll go into the CSS folder and that's this rps.css. And again this is very, very simple. We have just our basic formatting up here and these are the CSS transitions.

As you can see that's very, very simple stuff. It has these little -webkit, -moz, -O, because these are new features, and as features are new in CSS until they are finalized this is the way that you call them. So this is rather thorough example that works in all the major browsers. Like I said it's about 200 lines of JavaScript code so it's pretty thorough. It uses most of the drag-and-drop events while avoiding features that are inconsistent or would add a unnecessary complexity.

There are currently no FAQs about HTML5: Drag and Drop in Depth.

 
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

* Estimated file size

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: Drag and Drop in Depth.

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 ?

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

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.