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

Figure 14-7. Changing the drag image
Dragging Between Windows
As I mentioned at the beginning of the chapter, there are separate events raised on the source element and
on the target element. It is possible that these elements can be in different browser windows or even different
applications. The process, however, works the same way.
To demonstrate this, open up a second instance of the Firefox browser and navigate to the Checkers
application. You should see two browser windows each showing the checker board. Select a checker on one
window and drag it to a square in the second window. You'll notice that you can only drop it on squares relative
to its original location in the first window. When you drop it, the piece is moved to the drop location but is
removed from the second window, not the image you initially selected.
The key to cross-window dragging is the dataTransfer object. This is provided in the dragenter , dragover ,
and dragleave events on the target object. It doesn't really matter where the drag initiated, this information
is placed in the dataTransfer object and provided to any window that supports these events. When the drop
event received this information, it removed the img element at the location specified in the dataTransfer object.
Because the drop event was processed on the second window, the img element was removed from the second
window.
The drag and dragend events are raised on the source element. Whatever logic was written on these event
handlers is executed in the first window. Notice that the selected img element was muted during the drag but
went back to normal when the drop was executed. This is because the dragend event fired on the source element
clears the selected attribute.
When you control both sides of the operation as you do here, you can decide what data needs to be
transferred and implement both sets of event handlers. In many cases, you can control only one side of the
process. For example, a user could drag a file from Windows Explorer onto your web page. The dragstart ,
drag, and dragend events (or their equivalents) are raised in the Windows Explorer application, which you
can't control. However, the dragenter , dragover , dragleave , and drop events are all fired on your web page.
You can decide if you will accept the drop based on the element it is being dropped on and the contents of the
dataTransfer object. You also control the process that occurs when the drop is completed.