HTML and CSS Reference
In-Depth Information
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) {
... = '1';
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
Search WWH ::

Custom Search