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

• If a piece of a different color is being jumped, then we'll remove it since the

code already has the img element. However, we only want to do this if this
method is called from the drop event, which is specified by the third parameter
to this function. The other two events ( dragOver and dragEnter ) use this
method to validate the move but don't actually make the move and they will
pass false for the third parameter.

3. now you'll need to change dragover event to validate the move before setting the

dropEffect . Replace the existing implementation of the dragOver() function with
the following code. The new code gets the id of the img that is being dragged from
the dataTransfer object and then uses the id to get the element. This is passed
in to the isValidMove() function along with the target element, which is obtained
from the event object ( e.target ). The dropEffect is set to “move” only if this is a
valid move.

function dragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}

// Get the img element that is being dragged
var dragID = e.dataTransfer.getData("text/plain");
var dragPiece = document.getElementById(dragID);

if (dragPiece &&
e.target.tagName === "DIV" &&
isValidMove(dragPiece, e.target, false)) {
e.dataTransfer.dropEffect = "move";
}
else {
e.dataTransfer.dropEffect = "none";
}
}

4. Replace the implementation of the dragEnter() function with the following code.

This code is essentially the same as the dragOver() function, except it adds the
“drop” class to the element instead of setting the dropEffect .

function dragEnter(e) {
// Get the img element that is being dragged
var dragID = e.dataTransfer.getData("text/plain");
var dragPiece = document.getElementById(dragID);