快捷導(dǎo)航

Jquery 快速構(gòu)建可拖曳的購(gòu)物車DragDrop

更新時(shí)間：2009年11月30日 22:24:21 作者：

拖曳功能早已經(jīng)成為各個(gè)網(wǎng)站吸引用戶的一大亮點(diǎn)，那有沒有想過如何把拖曳功能應(yīng)用到電子商務(wù)網(wǎng)站的購(gòu)物車功能模塊中呢？

這樣一來，購(gòu)買者只需要把自己感興趣的商品拖曳到自己的購(gòu)物車中，也可以從購(gòu)物車中刪除商品同時(shí)更新購(gòu)物車的總體價(jià)格和數(shù)量。
那咱們就開始實(shí)例吧，本實(shí)例并沒有鏈接數(shù)據(jù)庫(kù)讀取數(shù)據(jù)來初始化Products,而是創(chuàng)建了一些虛擬的商品如下：
1、創(chuàng)建Product實(shí)體類

復(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動(dòng)態(tài)生成連續(xù)的商品編號(hào)

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> 

頁(yè)面初始化時(shí)生成Div Draggable

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$(".productItemStyle").draggable({ helper: "clone", opacity: "0.5" }); 
)}; 

5、創(chuàng)建一個(gè)DropZone
DropZones 是購(gòu)物車區(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時(shí)的樣式
drop函數(shù)：當(dāng)Product拖放到DropZone時(shí)出發(fā)的函數(shù)，此函數(shù)主要做了一個(gè)Product Item的Clone，價(jià)格的計(jì)算、添加Remove按鈕以及到點(diǎn)擊Remove按鈕時(shí)所觸發(fā)的事件。
價(jià)格的計(jì)算updateTotal()函數(shù)

復(fù)制代碼代碼如下:

 
// update the total! 
function updateTotal(price) { 
total += parseFloat(price); 
$("#total").html(total.toFixed(2)); 
$(".shoppingCartTotal").effect("bounce"); 
} 

最終效果如下圖：