HTML and CSS Reference
To determine the appropriate squares, the first rule is that checkers are only on the
black (or red in this case) squares. So the code uses the same (x + y) % 2 != 0
logic that was used to compute the css variable. Then, checkers are only placed on
the top 3 and bottom 3 rows, so the code excludes rows 3 and 4. If the row is less
than 3, this will add a white checker and use a black checker for the other rows. The
code computes the id for the img element by prefixing the id of the square with
either “w” or “b”. notice that the draggable attribute is set to true.
The class attribute for the img elements was set to piece. now add the following
rule to the existing style element, which will add padding so the checker will be
centered in the square.
Press F5 to start the application and you should now see the checkers as
demonstrated in Figure 14-4 .
Figure 14-4. The initial checker board with checkers
Adding Drag and Drop Support
The img elements were added with the draggable attribute so you should be able to select one and drag it.
However, you'll notice that none of the squares will accept the drop and the cursor shows the “not allowed” icon.
If you want to try some default browser functionality, try dragging an image to address bar; the browser will
navigate to the image's URL. You will now add code that will enable a drop so you can start moving the pieces.
Then you'll refine this code to ensure that only legal moves are allowed.