Jquery快速構建可拖拽的購物車-DragDrop

拖拽功能早已經成為各個網站吸引用戶的一大亮點，那有沒有想過如何把拖拽功能應用到電子商務網站的購物車功能模塊中呢？ 這樣一來，購買者只需要把自己感興趣的商品拖拽到自己的購物車中，也可以從購物車中刪除商品 同時更新購物車的總體價格和數量。

那咱們就開始實例吧，本實例并沒有鏈接數據庫讀取數據來初始化Products,而是創建了一些虛擬的商品如下：

1、 創建Product實體類

public class Product

{

public string Code { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public double Price { get; set; }

}

2、 構建商品List<Product>

public class Product

{

public string Code { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public double Price { get; set; }

}

3、創建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動態生成連續的商品編號

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈