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

Exploring a sample drag-and-drop application

From: HTML5: Drag and Drop in Depth

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.

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.

Show transcript

This video is part of

Image for HTML5: Drag and Drop in Depth
HTML5: Drag and Drop in Depth

15 video lessons · 9455 viewers

Bill Weinman
Author

 

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: 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?

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.