Jquery quickly builds a drag-and-drop shopping cart DragDrop

In this way, the buyer only needs to drag the item he or she is interested in to his or her own shopping cart. He or she can also delete the item from the shopping cart and update the overall price and quantity of the shopping cart.
Let's start with the instance. This instance does not connect to the database to read data to initialize Products. Instead, it creates some virtual Products as follows:
1. Create a Product entity class
Copy codeThe Code is as follows:
Public class Product
{
Public string Code {get; set ;}
Public string Name {get; set ;}
Public string Description {get; set ;}
Public double Price {get; set ;}
}
[Code]
2. Create a Product List <Product>
[Code]
Public class Product
{
Public string Code {get; set ;}
Public string Name {get; set ;}
Public string Description {get; set ;}
Public double Price {get; set ;}
}

3. Create a DataList and bind the List <Product>
Copy codeThe Code is as follows:
<Asp: DataList ID = "dlProducts" RepeatColumns = "3"
RepeatDirection = "Horizontal" runat = "server">
<ItemTemplate>
<Div class = "productItemStyle" price = '<% # Eval ("Price") %>'
Code = '<% # Eval ("Code") %>' id = 'item _ <%# Container. ItemIndex + 1%> '>
<Li>
<% # Eval ("Code") %>
</Li>
<Li>
<% # Eval ("Name") %>
</Li>
<Li>
<% # Eval ("Description") %>
</Li>
<Li>
$ <% # Eval ("Price") %>
</Li>
</Div>
</ItemTemplate>
</Asp: DataList>
Private void BindData ()
{
Var products = GetProducts ();
DlProducts. DataSource = products;
DlProducts. DataBind ();
}

ProductItemStyle style name
Container. ItemIndex dynamically generates consecutive item numbers

4. Generate Products Div Draggable
Download the latest Jquery JS file and Its UI file:
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript" src = "jquery-1.2.6.min.js"> </script>
<Script language = "javascript" type = "text/javascript"
Src = "jquery-ui-personalized-1.6rc4.min.js"> </script>

Generate Div Draggable during page Initialization
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ (". ProductItemStyle"). draggable ({helper: "clone", opacity: "0.5 "});
)};

5. Create a DropZone
DropZones is the shopping cart area.
Copy codeThe Code is as follows:
$ (". DropZone"). droppable (
{
Accept: ". productItemStyle ",
HoverClass: "dropHover ",
Drop: function (ev, ui ){
Var droppedItem = ui. draggable. clone (). addClass ("droppedItemStyle ");
Var productCode = droppedItem [0]. attributes ["code"]. nodeValue;
Var productPrice =
GetFormattedPrice (droppedItem [0]. attributes ["price"]. nodeValue );
Var removeLink = document. createElement ("");
RemoveLink. innerHTML = "Remove ";
RemoveLink. className = "deleteLink ";
RemoveLink. href = "#";
RemoveLink. onclick = function ()
{
$ (". DropZone"). children (). remove ("#" + droppedItem [0]. id );
UpdateTotal (productPrice * (-1 ));
}
DroppedItem [0]. appendChild (removeLink );
$ (This). append (droppedItem );
UpdateTotal (productPrice );
}
}
);

Accept parameter: displays the Div of Class = "productItemStyle"
HoverClass parameter: The style when a Product is placed in DropZone
Drop function: this function is used when the Product is dragged to the DropZone. This function is mainly used to Clone a Product Item, price calculation, add Remove, and events triggered when you click Remove.
Price Calculation updateTotal () function
Copy codeThe Code is as follows:
// Update the total!
Function updateTotal (price ){
Total + = parseFloat (price );
$ ("# Total" 2.16.html (total. toFixed (2 ));
$ (". ShoppingCartTotal"). effect ("bounce ");
}

The final effect is as follows:

Original English address:Http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx