当前位置：Gxlcms > JavaScript > Jquery快速构建可拖曳的购物车DragDrop_jquery

Jquery快速构建可拖曳的购物车DragDrop_jquery

时间：2021-07-01 10:21:17 帮助过：8人阅读

这样一来，购买者只需要把自己感兴趣的商品拖曳到自己的购物车中，也可以从购物车中删除商品同时更新购物车的总体价格和数量。
那咱们就开始实例吧，本实例并没有链接数据库读取数据来初始化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; } 
} 
[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、创建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动态生成连续的商品编号

4、生成Products Div Draggable
下载最新的Jquery JS文件及其UI文件：

代码如下: