Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

526 CHAPTER 13 Drag and drop

16. In Solution Explorer, right-click the default.html file and choose Set As Start Page.


17. Test your work by pressing F5 to run the website. You should see the default.html page
    as shown in Figure 13-7.

FIGURE 13-7 he rendered number scramble pageT

At this point, you have the default message and the rendered game board with the tiles.

There is no drag and drop functionality, and the numbers don’t scramble.

Exercise 2: Add drag and drop to the game

In this exercise, you apply your knowledge of drag and drop by adding code to the number

scramble game you created in Exercise 1, “Create a number scramble game,” to support drag

and drop functionality.

1. Start Visual Studio Express 2012 for Web. Open the NumberScramble project.


2. In the default.js file, add the following code to the document ready function to sub-
   scribe to the dragstart, dragend, dragenter, dragover, and drop events.
   $(document).ready(function () {
   jQuery.event.props.push('dataTransfer');
   createBoard();
   addTiles();
   $('#gameBoard').on('dragstart', dragStarted);
   $('#gameBoard').on('dragend', dragEnded);
   $('#gameBoard').on('dragenter', preventDefault);