Dealing with Local Files Using the File API - HTML5 Programming for ASP.NET Developers - page 234

srcElement = this;
e.dataTransfer.effectAllowed = 'move';
var product=$(this).ind("header")[0].innerHTML;
e.dataTransfer.setData('text/html', product);
}
The OnDragStart event-handler function stores the source of drag operation in a global variable
srcElement because you need it later in the drop event handler. The effectAllowed property of the
dataTransfer object is set to move . When the user drags a product and drops it on the shopping bag, you
need to transfer the corresponding product name to the drop target. In this case, product names are
placed inside <header> elements; hence the find() method finds all the header elements and then grabs the
innerHTML (the product name) of the header element. The setData() method sets the product name as the
data to be transferred via the dataTransfer object. This way, the drop event handler knows which product
is to be added to the shopping cart. The first parameter of setData() indicates the MIME type of the data
that is being transferred ( 'text/html' in this case).
OnDragOver
The OnDragOver event-handler function adds a CSS class to the drop target so as to give the user a visual
clue about the operation. The OnDragOver function is shown in Listing 9-10.
Listing 9-10. OnDragOver Function
function OnDragOver(e) {
...
$(this).addClass('highlight');
e.dataTransfer.dropEffect = 'move';
}
The highlight CSS class essentially adds a highlight to the drop target (shopping bag <div> element)
by changing its background color. It's shown here:
.highlight
{
background-color:Yellow;
}
The dropEffect property of the dataTransfer object is set to move .
OnDragEnter and OnDragLeave
The OnDragEnter and OnDragLeave event handlers merely add the highlight CSS class to and remove it
from the drop target element. These event handlers are shown in Listing 9-11.
Listing 9-11. OnDragEnter and OnDragLeave Functions
function OnDragEnter(e) {
$(this).addClass('highlight');
}
function OnDragLeave(e) {
$(this).removeClass('highlight');
}