Drag and Drop - HTML5 with Visual Studio 2012 - page 354

You'll start by implementing the general rule first. This will be performed by creating a new function called
enableNextPlayer() . This function will use the querySelectorAll() function to get all of the img elements.
The draggable attribute will be set to either true or false depending on the id prefix. Then you'll later add special
logic that will handle the jump condition.

eXerCISe 14-7. taKING tUrNS

1. Add the enableNextPlayer() function to the existing script element using the

code shown in Listing 14-8.

Listing 14-8. Implementing the enableNextPlayer() function

function enableNextPlayer(piece) {

// Get all of the pieces
var pieces = document.querySelectorAll('img');

i = 0;
while (i < pieces.length) {
var p = pieces[i++];

// If this is the same color that just moved, disable dragging
if (p.id.substr(0, 1).toUpperCase() ===
piece.id.substr(0, 1).toUpperCase()) {
p.draggable = false;
}
// Otherwise, enable dragging
else {
p.draggable = true;
}
}
}

2. At the end of the isValidMove() function add the code shown in bold. This will call

the enableNextPlay() function when a drop is being performed.

// Set the draggable attribute so the next player can take a turn
if (drop) {
enableNextPlayer(source);
}

return true;
}

■ normally it might make more sense to put this call in the drop() function. However, only the
isValidMove() function knows that a jump occurred and we'll need to add the override logic here, and that needs
to be after the general rule has been applied.

Note