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

■ The draggable attribute is set to true, initially, for both the white and black pieces so either color can
make the first move. If you wanted to specify which color went first, you would change the Razor syntax that creates
the initial img elements to set the draggable attribute to false for one color. I did some research to see what color
was supposed to go first but found mixed results. Some places indicated black goes first and others said that the
white goes first. Some, however, said it's just a game, what difference does it make? I decided to implement this
logic, so either can go first.

Note

Using Advanced Features
Before I finish this chapter, there are a couple of things that I want to discuss briefly. First, I'll show you how to use
a custom drag image. Then I'll demonstrate dragging elements across browser windows.

Changing the Drag Image
When you drag an element, a copy of the element follows the cursor as you move it around the page. This is
referred to as the drag image. However, you can specify a different image to be used. This is done with the
setDragImage() function of the dataTransfer object.
There is a smiley face image in the Images folder. Add the code shown in bold to the dragStart() function to
use this as the drag image.

function dragStart(e) {
if (e.target.draggable) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", e.target.id);

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

var dragIcon = document.createElement("img");
dragIcon.src = "Images/smiley.jpg";
e.dataTransfer.setDragImage(dragIcon, 0, 0);

}
}

Try out the application and as you move pieces you should see the smiley face as shown in Figure 14-7 .