My question is: in the addClass method, where does the droppable class come from... there is no reference to it in the program that I am including below...
Also how the piece $('.checkerboard tr:nth-of-type(even) td:nth-of-type(odd) is working
You can execute the complete program I am including here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkers</title>
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="http://file54.com/learning_jquery/site.css" rel="stylesheet">
<link href="http://file54.com/learning_jquery/interactions.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('.checkerboard tr:nth-of-type(even) td:nth-of-type(odd), .checkerboard tr:nth-of-type(odd) td:nth-of-type(even)').addClass('droppable');
$('.draggable').draggable({
containment : '.checkerboard',
revert : 'invalid',
revertDuration : 250,
grid : [90, 90]
});
$('.droppable').droppable({
hoverClass: 'highlight',
accept : '.draggable',
tolerance : 'fit'
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>Drag and Drop</h1>
<table class="checkerboard">
<tr>
<td></td><td><span class="piece draggable"></span></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</footer>
</div>
</body>
</html>
A lot of thanks for explanations.