easyUI 购物车 Doppable.Draggable

最新推荐文章于 2022-05-07 23:27:31 发布

al_bat

最新推荐文章于 2022-05-07 23:27:31 发布

阅读量825

点赞数

分类专栏： easyUI&&thinkphp

本文链接：https://blog.csdn.net/ccyours/article/details/41848659

版权

easyUI&&thinkphp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

知识点

一：基本的拖动和放置

首先，我们创建三个元素：

<div id="dd1" class="dd-demo"></div>
 <div id="dd2" class="dd-demo"></div>
 <div id="dd3" class="dd-demo"></div>

对于第一个元素，我们通过默认值让其可以拖动。

$('#dd1').draggable();

对于第二个元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。

$('#dd2').draggable({
    proxy:'clone'
 });

对于第三个元素，我们通过创建自定义代理（proxy）让其可以拖动。此时传递的source会默认传递给easyui框架,自定义的P对象则为拖动时的显示内容。

$('#dd3').draggable({
    proxy:function(source){
    var p = $('<div class="proxy">proxy</div>');
    p.appendTo('body');//注释掉则拖动时不显示P对象
    return p;//必须返回P
    }
 });

二：正文

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/icon.css">
	<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<style type="text/css">
		.products{
			list-style:none;
			margin-right:300px;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.item{
			display:block;
			text-decoration:none;
		}
		.item img{
			border:1px solid #333;
		}
		.item p{
			margin:0;
			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.cart{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
	</style>
	<script>
		var data = {"total":0,"rows":[]};
		var index;//购物车商品索引
	  $(function(){
		$("#shopcar").datagrid({
			singleSelect:true,		
		});
		//商品图片
		$(".item").draggable({
			revert:true,
			proxy:'clone',
			//设置拖动zindex,拖动所产生的prox是个对象。
			onStartDrag:function(){$(this).draggable('proxy').css('z-index',10);},
			onStopDrag:function(){
					$(this).draggable('options').cursor='pointer';
				}			
		});
		//购物车
		$(".cart").droppable({
			//只接受item商品
			accept:'.item',
			//拖进来的时候触发
			onDrop:function(e,source){
				var id = parseInt($(source).find('p:eq(2)').html());
				var name = $(source).find('p:eq(0)').html();
				var price = parseInt($(source).find('p:eq(1)').html());
				//进行商品的数据的处理
				
			    shopcarManage(id,name,price);
				//重新加载数据
				//$("#shopcar").datagrid('reload');
				//console.log(JSON.stringify(data));
				$('#shopcar').datagrid('loadData', data);
				$(".total").empty().html("合计:"+data.total);
			}			
		});
	  });

	//修改已有数据结构值
	function shopcarManage(id,name,price){
		//购物车是否为空
		 
		var add=0;
		if(data.rows.length){
			//遍历是否存在该商品
			for(var i=0;i<data.rows.length;i++){
				//如果购物车存在要添加的商品
				if(data.rows[i].shop_id==id){//
					//修改该数据节点
					data.rows[i].shop_counts+=1;
					data.rows[i].shop_price+=price;
					add=1;
				}
			}
			if(add==0){
				data.rows.push({"shop_id":id,"shop_name":name,"shop_counts":1,"shop_price":price});
			}
		}else{
			//添加新商品
			data.rows.push({"shop_id":id,"shop_name":name,"shop_counts":1,"shop_price":price});
		}
		//商品购物车总价增加
		data.total+=price;
	}	
</script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
	<ul class="products">
		<li>
			<a href="#" class="item">
				<img src="images/shirt1.gif"/>
				<div>
					<p>大衣</p>
					<p>25</p>
					<p>1</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="images/shirt2.gif"/>
				<div>
					<p>围巾</p>
					<p>35</p>
					<p>2</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="images/shirt3.gif"/>
				<div>
					<p>帽子</p>
					<p>15</p>
					<p>3</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="images/shirt4.gif"/>
				<div>
					<p>风衣</p>
					<p>45</p>
					<p>4</p>
				</div>
			</a>
		</li>
	</ul>
	<div class="cart">
		<h1>购物车</h1>
		<div style="background:#fff">
			<table id="shopcar">
				<thead>
				<tr>
					<th field="shop_id" width=30 align="right">id</th>					 
					<th field="shop_name" width=140 align="center">商品</th>
					<th field="shop_counts" width=60 align="right">数量</th>
					<th field="shop_price" width=60 align="right">合计</th>
				</tr>
				</thead>			
			</table>
		</div>
		<p class="total">总价: $0</p>
		<h2>拖动商品到购物车</h2>
	</div>
</body>
</html>

我们可以把easyUI 的每个控件看为一个特殊的选择器，类似jquery的选择器。每个选择器获取后返回的都是一个对象。easyUI为每一个获取到的对象提供一个事务处理接口，接口声明方式为：选择器.接口({接口初始化属性或者方法})；例如：

为ID为table_data的表格声明一个datagrid接口：

<pre name="code" class="html">$("#table_data").datagrid();//()内可以设置datagrid属性

如果对已经声明了接口的选择器进行onclick等事件绑定，则只需再次调用接口声明方式即可，与已经声明了的不冲突也不重复。例如：

1.为ID为table_data的表格声明一个datagrid接口，且绑定onSelect事件

既可以写为：

<pre name="code" class="javascript">$("#table_data").datagrid({onSelect:function(){...}});

也可以写为：

<pre name="code" class="javascript">$("#table_data").datagrid('onSelect',function(){...});

如果对已经声明了接口的选择器控件所支持的方法进行调用,调用方式为：

$("#table_data").datagrid('reload',参数可有可无);

Draggable:将元素拖动至指定的位置，属性：

proxy：指定拖动规则,可为字符串或方法。字符串为‘clone’，表示在拖动的时候鼠标显示为该元素。

方法为自定义，务必返回jquery对象,定义的对象也要为jquery对象

revert：是否松开鼠标恢复原位置。true为恢复，否则则元素位置改变

如果需要拖动至某个元素，则目的元素需要具有可droppable性。

al_bat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI 购物车 Doppable.Draggable

知识点一：基本的拖动和放置首先，我们创建三个元素：对于第一个元素，我们通过默认值让其可以拖动。$('#dd1').draggable();对于第二个元素，我们通过创建一个克隆（clone）了原来元素的代理（proxy）让其可以拖动。$('#dd2').draggable({ proxy:'clone' });对于第三个元素
复制链接

扫一扫