3 拖放效果的购物车

于 2012-12-02 20:32:22 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： jQuery-EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gdhyyanglang/article/details/8249264
版权

如果你能在你的web应用程序简单的实现拖放效果，那么你的web应用程序才会有一些特别的东西。使用EasyUI，可以让我们的web应用程序具有拖放的能力。

在下面的教程中，将向你展示如何创建一个购物车页面，它能够让用户通过拖放来进行购买商品。拖放过程中，购物篮的信息将会被更新。

下面是官方演示网址：

http://www.jeasyui.com/tutorial/dd/dnd2_demo.html

很酷吧，下面马上来看看实现步骤。

3.1 显示商品

代码清单2-1 dragTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<style type="text/css">
li{
	display:inline;/*让li可同时在一行显示，默认情况下li占用一行*/
	float:left;
	margin:10px;
}
.item{
	display:block;/*让a标签（含有图片和两个段落p）设置为一个块*/
	text-decoration:none;
}
.item img{
	border:1px solid #333;
}
.item p{
	margin:0;
	font-weight:bold;
	text-align:center;
	color:#c3c3c3;
}
</style>

</head>

<body>
<div class="product">
<ul>
	<li>
    	<a href="#" class="item">
        <img src="images/shirt1.gif" />
        <p>Balloon</p>
        <p>Price:$25</p>
        </a>
	</li>
    <li>
    	<a href="#" class="item">
        <img src="images/shirt2.gif" />
        <p>Feeling</p>  
        <p>Price:$25</p> 
        </a>
	</li>
</ul>
</div>
</body>
</html>

在上面的代码中，你能看到我们在ul标签中包含了li标签，li标签用来显示商品。每一种商品都有名字和价格属性，属性包含在p标签中。

3.2 创建购物车

在body标签中再次插入购物车div，如下：

<div class="car">
<h1>Shopping Car</h1>
<table id="carContainer">
<thead>
<tr>
	<th field="name" width="140">名字</th>
    <th field="quantity" width="60">数量</th>
    <th field="price" width="60">价格</th>
</tr>
<!-- 剩下的信息由JS动态增加 -->
</thead>
</table>
<p class="total">总计：$0</p>
<h2>拖放到这里</h2>
</div>

设置car外观：

.car{
	float:right;
	width:270px;
	height:100%;
	background:#ccc;
	padding:0px 10px;
}

3.3  设置商品拖动效果

由于商品的所有信息包含在item（a标签）中，所以我们使用js对item进行处理：

<script type="text/javascript">
$(function(){
	$('.item').draggable({  
        revert:true,  //表示拖放后，拖放的元素会回到原位
        proxy:'clone',  //拖放效果为复制（原元素不动，拖动的为复制元素）
    });  
});
</script>

3.4 将表格转换为数据网格

可以通过《 3.1 表格转换为数据网格》的知识，利用JS代码将表格转换为数据网格。 
$(function(){
	$('#carContainer').datagrid({//将表格grid
		singleSelect:true,
	});
});

3.5 将商品放入购物车

EasyUI中的droppable表示元素拖动至容器，容器将会接收拖动过来的元素。其有属下事件：

名称

参数

描述

onDragEnter

e,source

当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。

onDragOver

e,source

当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。

onDragLeave

e,source

当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。

onDrop

e,source

当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。

有了上面的知识，现在就可以编写购物车的JS代码：

$('.car').droppable({
		 
});

此时将商品托放置购物车，商品并不会回到原来的位置，而是直接进入购物车。

下面将要实现购物车的逻辑功能，计算总价格。进过分析可知，当有商品放入购物车的时候就进行计算，因此使用onDrop事件。

$('.car').droppable({		
	//当可拖动元素被拖入目标容器并放置的时候触发
//参数source是被拖动的DOM元素。
	onDrop:function(e,source){  
		var name = $(source).find('p:eq(0)').html();//获得拖动元素的名字 
		var price = $(source).find('p:eq(1)').html(); //获得价格
		//更新数据网格
		addProduct(name, parseFloat(price.split('$')[1]));
	}  
});

addProduct方法如下：

//方法之前加入下面初始化语句，total表示商品数量，row表示购物车一行数据
	var data = {"total":0,"rows":[]};  
	var totalCost = 0;  //总价格
	function addProduct(name,price){  
		function add(){
			//遍历数据网格商品
			for(var i=0; i<data.total; i++){  
				var row = data.rows[i];  
				if (row.name == name){ //如果数据网格中存在拖入的商品
					row.quantity += 1; //数量增加
					return; //跳出add方法
				}  
			}
			//如果是新商品，total增加
			data.total += 1;  
			//将新商品加入rows数组
			data.rows.push({  
				name:name,  
				quantity:1,  
				price:price  
			});  
		}  
		add(); 
		//计算总价格
		totalCost += price;
		$('#carContainer').datagrid('loadData', data);
		 //获取class为total的标签，并改变其文本值
		$('.total').html('总计： $'+totalCost); 
	}
注意push语句中的属性要和表格中的field属性值对应。应为 
$('#carContainer').datagrid('loadData', data);
语句加载数据的时候要依据属性值进行匹配加载。
附件：shoppingCarTest.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<style type="text/css">
li{
	display:inline;/*让li可同时在一行显示，默认情况下li占用一行*/
	float:left;
	margin:10px;
}
.item{
	display:block;/*让a标签（含有图片和两个段落p）设置为一个块*/
	text-decoration:none;
}
.item img{
	border:1px solid #333;
}
.item p{
	margin:0;
	font-weight:bold;
	text-align:center;
	color:#c3c3c3;
}
.car{
	float:right;
	width:270px;
	height:100%;
	background:#ccc;
	padding:0px 10px;
}
</style>

<script type="text/javascript">
$(function(){
	$('#carContainer').datagrid({//将表格grid
		singleSelect:true,
	});
	$('.item').draggable({  
        revert:true,  //表示拖放后，拖放的元素会回到原位
        proxy:'clone',  //拖放效果为复制（原元素不动，拖动的为复制元素）
       
    });  
	$('.car').droppable({
		
		//当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。
		onDrop:function(e,source){  
			var name = $(source).find('p:eq(0)').html();//获得拖动元素的名字 
			var price = $(source).find('p:eq(1)').html(); //获得价格
			//更新数据网格
			addProduct(name, parseFloat(price.split('$')[1]));
		}  
	});
	
	//total表示商品数量，row表示购物车一行数据
	var data = {"total":0,"rows":[]};  
	var totalCost = 0;  //总价格
	function addProduct(name,price){  
		function add(){
			//遍历数据网格商品
			for(var i=0; i<data.total; i++){  
				var row = data.rows[i];  
				if (row.name == name){ //如果数据网格中存在拖入的商品
					row.quantity += 1; //数量增加
					return; //跳出add方法
				}  
			}
			//如果是新商品，total增加
			data.total += 1;  
			//将新商品加入rows数组
			data.rows.push({  
				name:name,  
				quantity:1,  
				price:price  
			});  
		}  
		add(); 
		//计算总价格
		totalCost += price;
		$('#carContainer').datagrid('loadData', data);
		 //获取class为total的标签，并改变其文本值
		$('.total').html('总计： $'+totalCost); 
	}   
});
</script>
</head>

<body>
<div class="product">
<ul>
	<li>
    	<a href="#" class="item">
        <img src="images/shirt1.gif" />
        <p>Balloon</p>
        <p>Price:$25</p>
        </a>
	</li>
    <li>
    	<a href="#" class="item">
        <img src="images/shirt2.gif" />
        <p>Feeling</p>  
        <p>Price:$25</p> 
        </a>
	</li>
</ul>
</div>
<div class="car" >
<h1>Shopping Car</h1>
<table id="carContainer" >
<thead>
<tr>
    <th field="name" width="140">名字</th>
    <th field="quantity" width="60">数量</th>
    <th field="price" width="60">价格</th>
</tr>
<!-- 剩下的信息由JS动态增加 -->
</thead>
</table>
<p class="total">总计：$0</p>
<h2>拖放到这里</h2>
</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值