524 CHAPTER 13 Drag and drop
#gameBoard {
width: 345px;
height: 345px;
margin-right: auto;
margin-left: auto;
}#message {
background-color: black;
font-size: 36px;
color: lime;
text-align: center;
width: 345px;
height: 80px;
margin-right: auto;
margin-left: auto;
}.tile {
font-size: 64px;
width: 80px;
height: 80px;
background-color: gray;
color: white;
text-align: center;
}.square {
background-color: black;
border: solid;
width: 80px;
height: 80px;
float: left;
}.dragged {
background-color: red;
}- In the default.js file, add a reference to the jQuery library. Declare a squareCount vari-
able and set it to 16. Declare an emptySquare variable as follows.
///
var squareCount = 16
var emptySquare;- In the default.js file, add the document ready function. In the document ready func-
tion, add a statement to instruct jQuery to copy the dataTransfer property to its event
wrapper when the event has this property. Add a call to a createBoard function and
add a call to an addTiles function.