Jquery 快速構(gòu)建可拖曳的購物車DragDrop
更新時間:2009年11月30日 22:24:21 作者:
拖曳功能早已經(jīng)成為各個網(wǎng)站吸引用戶的一大亮點(diǎn),那有沒有想過如何把拖曳功能應(yīng)用到電子商務(wù)網(wǎng)站的購物車功能模塊中呢?
這樣一來,購買者只需要把自己感興趣的商品拖曳到自己的購物車中,也可以從購物車中刪除商品 同時更新購物車的總體價格和數(shù)量。
那咱們就開始實例吧,本實例并沒有鏈接數(shù)據(jù)庫讀取數(shù)據(jù)來初始化Products,而是創(chuàng)建了一些虛擬的商品如下:
1、 創(chuàng)建Product實體類
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、 構(gòu)建商品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、創(chuàng)建DataList并綁定List<Product>
<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 樣式名稱
Container.ItemIndex動態(tài)生成連續(xù)的商品編號

4、 生成Products Div Draggable
下載最新的Jquery JS文件及其UI文件:
<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>
頁面初始化時生成Div Draggable
$(document).ready(function() {
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });
)};
5、創(chuàng)建一個DropZone
DropZones 是購物車區(qū)域
$(".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("a");
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參數(shù):展示Class= “productItemStyle”的Div
hoverClass參數(shù):當(dāng)有Product放到DropZone時的樣式
drop函數(shù):當(dāng)Product拖放到DropZone時出發(fā)的函數(shù),此函數(shù)主要做了一個Product Item的Clone,價格的計算、添加Remove按鈕以及到點(diǎn)擊Remove按鈕時所觸發(fā)的事件。
價格的計算updateTotal()函數(shù)
// update the total!
function updateTotal(price) {
total += parseFloat(price);
$("#total").html(total.toFixed(2));
$(".shoppingCartTotal").effect("bounce");
}
最終效果如下圖:

英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
那咱們就開始實例吧,本實例并沒有鏈接數(shù)據(jù)庫讀取數(shù)據(jù)來初始化Products,而是創(chuàng)建了一些虛擬的商品如下:
1、 創(chuàng)建Product實體類
復(fù)制代碼 代碼如下:
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、 構(gòu)建商品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、創(chuàng)建DataList并綁定List<Product>
復(fù)制代碼 代碼如下:
<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 樣式名稱
Container.ItemIndex動態(tài)生成連續(xù)的商品編號

4、 生成Products Div Draggable
下載最新的Jquery JS文件及其UI文件:
復(fù)制代碼 代碼如下:
<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>
頁面初始化時生成Div Draggable
復(fù)制代碼 代碼如下:
$(document).ready(function() {
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" });
)};
5、創(chuàng)建一個DropZone
DropZones 是購物車區(qū)域
復(fù)制代碼 代碼如下:
$(".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("a");
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參數(shù):展示Class= “productItemStyle”的Div
hoverClass參數(shù):當(dāng)有Product放到DropZone時的樣式
drop函數(shù):當(dāng)Product拖放到DropZone時出發(fā)的函數(shù),此函數(shù)主要做了一個Product Item的Clone,價格的計算、添加Remove按鈕以及到點(diǎn)擊Remove按鈕時所觸發(fā)的事件。
價格的計算updateTotal()函數(shù)
復(fù)制代碼 代碼如下:
// update the total!
function updateTotal(price) {
total += parseFloat(price);
$("#total").html(total.toFixed(2));
$(".shoppingCartTotal").effect("bounce");
}
最終效果如下圖:

英文原文地址:http://www.codeproject.com/KB/aspnet/JQueryShoppingCart.aspx
相關(guān)文章
jQuery ajax全局函數(shù)處理session過期后的ajax跳轉(zhuǎn)問題
這篇文章主要介紹了基于jQuery的全局ajax函數(shù)處理session過期后的ajax操作的相關(guān)資料,需要的朋友可以參考下2016-06-06jquery實現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁面元素動畫效果的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09