Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

522 CHAPTER 13 Drag and drop

1. To which events do you need to subscribe to program file drag and drop? (Choose all
   that apply.)
   A. dragstart
   B. drag
   C. dragend
   D. dragenter
   E. dragover
   F. dragleave
   G. drop


2. Which of the following is not a property on the File object?
   A. name
   B. path
   C. type
   D. size

Practice exercises

If you encounter a problem completing any of these exercises, the completed projects can be

installed from the Practice Exercises folder that is provided with the companion content.

Exercise 1: Create a number scramble game

In this exercise, you apply your knowledge of drag and drop by creating a number scramble

game. The game consists of a game board that has four rows and four columns, thus provid-

ing sixteen squares in which a sliding tile that has a number can exist. Fifteen of the squares

are occupied by numbered tiles. This leaves one empty square that can be used to move tiles.

The object is to arrange the tiles in numeric order by dragging tiles to the empty space after

they have been scrambled. The only tiles that can be dragged to the empty space are tiles

horizontally or vertically adjacent to the empty space.

In Exercise 1, you create the game board and the tiles by creating the webpage, the CSS

file, and the first part of the JavaScript file. In Exercise 2, “Add drag and drop to the game,”

you add the drag and drop functionality.

1. Start Visual Studio Express 2012 for Web. Create an ASP.NET Empty Web Application
   project called NumberScramble.


2. Add an HTML file to the project. Name the file default.html.


3. Add a CSS file to the project. Name the file default.css.


4. Add a new folder called Scripts to the project.


5. Right-click the Scripts folder and add a new JavaScript file called default.js.