HTML and CSS Reference
In-Depth Information
OnDrop
The
OnDrop
event-handler function is the main event handler in which you transfer product names from
the
DataTransfer
objet to the shopping cart. The
OnDrop
function is shown in Listing 9-12.
Listing 9-12.
OnDrop
Function
function OnDrop(e) {
...
srcElement.style.opacity = '1';
$(this).removeClass('highlight');
var count = $(this).ind("div[data-product-name='" +
e.dataTransfer.getData('text/html') + "']").length;
if (count <= 0) {
$(this).append("<div class='selectedproduct' data-product-name='" +
e.dataTransfer.getData('text/html') + "'>" +
e.dataTransfer.getData('text/html') + "</div>");
}
else {
alert("This product is already added to your cart!");
}
return false;
}
The
drop
event handler sets the opacity of the source element back to
1
because the drag-and-drop
operation is complete. It also removes the
highlight
CSS class from the target element. It then appends
the product being dragged to the target element.
Notice the use of the
getData()
method to retrieve the data previously set in the
OnDragStart
event-
handler function. There is also a check so the same product can't be added to the cart multiple times.
Figure 9-7 shows how an error message is shown to the user if the same product is dragged and dropped
multiple times.
Figure 9-7.
Checking for duplicate products after the drop
