Jquery快速構建可拖曳的購物車DragDrop_jquery

這樣一來，購買者只需要把自己感興趣的商品拖曳到自己的購物車中，也可以從購物車中刪除商品 同時更新購物車的總體價格和數(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、 構建商品List
[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
代碼如下:
RepeatDirection="Horizontal" runat="server">

'
code='<%# Eval("Code") %>' id='item_<%# Container.ItemIndex + 1 %>'>

<%# Eval("Code") %>

<%# Eval("Name") %>

<%# Eval("Description") %>

$<%# Eval("Price") %>

private void BindData()
{
var products = GetProducts();
dlProducts.DataSource = products;
dlProducts.DataBind();
}

productItemStyle 樣式名稱
Container.ItemIndex動態(tài)生成連續(xù)的商品編號

4、 生成Products Div Draggable
下載最新的Jquery JS文件及其UI文件：
代碼如下:

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com