HTML and CSS Reference
In-Depth Information
<input type="hidden" value="<%# Eval("ProductId") %>" />
</div>
</ItemTemplate>
</asp:Repeater>
Notice the code in bold. The <div> elements representing products are marked with the draggable
attribute set to true . The remaining markup from Listing 9-7 essentially binds various columns of the
Products table with HTML elements using the ASP.NET Eval() data-binding expression.
Handling Drag-and-Drop Events
The next step is to wire drag-and-drop event handlers to various elements. The jQuery code that wires
various event handlers is shown in Listing 9-8.
Listing 9-8. Wiring Drag-and-Drop Event Handlers
$(document).ready(function () {
$("div .product").each(function () {
this.addEventListener('dragstart', OnDragStart, false);
});
var cart = $("#divCart").get(0);
cart.addEventListener('dragenter', OnDragEnter, false);
cart.addEventListener('dragleave', OnDragLeave, false);
cart.addEventListener('dragover', OnDragOver, false);
cart.addEventListener('drop', OnDrop, false);
cart.addEventListener('dragend', OnDragEnd, false);
})
As you can see, first all the <div> elements that have the product CSS class applied to them (that is, the
container <div> elements of all the products) are selected using a jQuery selector. Then the each() method
is called on the result set to add an event listener for the dragstart event. The addEventListener() method
wires an event-handler function to an event. In this case, the dragstart event is handled by the
OnDragStart function.
The <div> element that contains the shopping bag and the buttons has the ID divCart . The divCart
element should handle other events such as dragenter , dragleave , and drop . A series of
addEventListener() method calls attaches event-handler functions to these events. The event-handler
functions take the form On XXXX , where XXXX is the name of the event.
In all, there are six event-handler functions: OnDragStart , OnDragEnter , OnDragLeave , OnDragOver ,
OnDrop , and OnDragEnd . Let's examine them one by one.
OnDragStart
The dragstart event handler reduces the opacity of the element being dragged so that the end user gets a
visual clue about the drag operation. The OnDragStart event-handler function that handles the dragstart
event is shown in Listing 9-9.
Listing 9-9. OnDragStart Event Handler Function
function OnDragStart(e) {
this.style.opacity = '0.3';
 
Search WWH ::




Custom Search