Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

530 CHAPTER 13 Drag and drop

}

function swapTileAndEmptySquare(sourceLocation) {

var $draggedItem = $('#square' + sourceLocation).children();

$draggedItem.detach();

var $target = $('#square' + emptySquare);

$draggedItem.appendTo($target);

emptySquare = sourceLocation;

}

13. Test your work by pressing F5 to run the website.
    You should be able to move the tiles by dragging and dropping a tile to the empty
    space. The default.html page after moving some tiles is shown in Figure 13-8.

FIGURE 13-8 he rendered number scramble page after moving some tilesT

Exercise 3: Add scramble and winner check

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

scramble game you created in Exercise 2 to scramble the tiles when the page is rendered and

check for a winner after each drag and drop.

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 call a
   scramble function that you create next.