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';