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

3. The drop() function creates a new img element and currently sets the draggable

attribute to true. now you'll need to make this conditional based on the draggable
attribute of the existing piece. Add the code shown in bold to the drop() function.

// Create a new img on the target location
var newPiece = document.createElement("img");
newPiece.src = droppedPiece.src;
newPiece.id = droppedPiece.id.substr(0, 1) + e.target.id;

if (droppedPiece.draggable){

newPiece.draggable = true;

}

newPiece.classList.add("piece");
newPiece.addEventListener("dragstart", dragStart, false);
newPiece.addEventListener("dragend", dragEnd, false);
e.target.appendChild(newPiece);

4. now you'll need change the dragStart event handler to ignore this event if the

element is not draggable. Add the code shown in bold to the dragStart() function.

function dragStart(e) {

if (e.target.draggable) {

e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", e.target.id);

e.target.classList.add("selected");

}

}

5. now you'll implement the special jump logic. If the piece just made a jump, you'll

set the draggable attribute back to true so it will be allowed to make another move.
However, you'll also add "jumponly" to the classList so you can enforce that the
only move that it is allowed to make is another jump.

6. Add the code shown in bold to the isValidMove() function. This will look for

"jumponly" in the classList and set the jumpOnly flag accordingly.

var jumpOnly = false;
if (source.classList.contains("jumpOnly")) {
jumpOnly = true;
}

// Compute the x and y coordinates
var xStart = parseInt(startPos.substr(0, 1));
var yStart = parseInt(startPos.substr(1, 1));