企业官网建设流程全解析

jQuery EasyUI 拖放 - 创建拖放的购物车

使用jQuery EasyUI的draggable和droppable插件，可以轻松实现一个交互式的拖放购物车应用。用户可以将商品图片拖动到购物车区域，系统自动添加商品、更新数量（重复拖动时增加数量）和总价。

这个示例模拟一个简单的购物页面：左侧显示商品列表，右侧是购物车（使用datagrid显示购物篮内容，并实时计算总价）。

官方教程参考：https://www.jeasyui.com/tutorial/dd/dnd2.php
在线 Demo：https://www.jeasyui.com/tutorial/dd/dnd2_demo.html

步骤 1: 引入 EasyUI 资源

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建 HTML 结构

左侧商品区（多个可拖动 div），右侧购物车区（包含 datagrid 和总价显示）。

<divstyle="margin:20px 0;"></div><divclass="easyui-panel"style="width:700px;padding:10px;"><divstyle="float:left;width:400px;"><divclass="item"><imgsrc="https://www.jeasyui.com/tutorial/dd/images/balloon.jpg"style="width:100px;height:100px;"><br>Balloon<br>Price:$25</div><divclass="item"><imgsrc="https://www.jeasyui.com/tutorial/dd/images/feeling.jpg"style="width:100px;height:100px;"><br>Feeling<br>Price:$25</div><divclass="item"><imgsrc="https://www.jeasyui.com/tutorial/dd/images/elephant.jpg"style="width:100px;height:100px;"><br>Elephant<br>Price:$25</div><divclass="item"><imgsrc="https://www.jeasyui.com/tutorial/dd/images/stamps.jpg"style="width:100px;height:100px;"><br>Stamps<br>Price:$25</div><divclass="item"><imgsrc="https://www.jeasyui.com/tutorial/dd/images/monogram.jpg"style="width:100px;height:100px;"><br>Monogram<br>Price:$25</div></div><divclass="cart"style="float:right;width:280px;"><h1>Shopping Cart</h1><divstyle="background:#fff"><tableid="cartcontent"class="easyui-datagrid"fitColumns="true"style="width:280px;height:auto;"><thead><tr><thfield="name"width="140">Name</th><thfield="quantity"width="60"align="right">Quantity</th><thfield="price"width="60"align="right">Price</th></tr></thead></table></div><pclass="total">Total: $0</p><h2>Drop here to add to cart</h2></div><divstyle="clear:both"></div></div><style>.item{width:120px;height:180px;float:left;margin:10px;text-align:center;cursor:pointer;border:1px solid #ccc;padding:10px;background:#fafafa;}.cart{border:2px dashed #aaa;padding:10px;height:400px;}</style>

步骤 3: JavaScript 实现拖放逻辑

核心：使商品可拖动（clone 代理），购物车可放置；放置时提取商品信息，更新 datagrid 和总价。

<scripttype="text/javascript">vardata={"total":0,"rows":[]};vartotalCost=0;$(function(){$('#cartcontent').datagrid({singleSelect:true});$('.item').draggable({revert:true,proxy:'clone',onStartDrag:function(){$(this).draggable('options').cursor='not-allowed';$(this).draggable('proxy').css('z-index',10);},onStopDrag:function(){$(this).draggable('options').cursor='move';}});$('.cart').droppable({onDragEnter:function(e,source){$(source).draggable('options').cursor='auto';},onDragLeave:function(e,source){$(source).draggable('options').cursor='not-allowed';},onDrop:function(e,source){varname=$(source).find('img').next().text();// 商品名称varprice=parseFloat($(source).find('img').next().next().text().substr(7));// 提取价格addProduct(name,price);}});});functionaddProduct(name,price){functionadd(){for(vari=0;i<data.total;i++){varrow=data.rows[i];if(row.name==name){row.quantity+=1;row.price+=price;return;}}data.total+=1;data.rows.push({name:name,quantity:1,price:price});}add();totalCost+=price;$('#cartcontent').datagrid('loadData',data);$('div.cart .total').html('Total: $'+totalCost);}</script>

关键说明

• 拖动效果：使用proxy:'clone'，拖动时显示克隆代理，原商品不动。
• 视觉反馈：拖入/拖出购物车时改变光标。
• 添加逻辑：如果同名商品已存在，增加数量和价格；否则新增一行。
• 实时更新：使用 datagrid 的loadData刷新购物车，总价单独计算并显示。
• 优势：用户体验直观，支持重复添加商品自动累加。

扩展建议

• 添加“移除”按钮：在 datagrid 中添加操作列，支持删除行并扣减总价。
• 支持本地存储：使用 localStorage 保存购物车数据。
• 真实商品图片：替换示例图片为实际商品。

更多示例：

• 官方购物车 Demo：https://www.jeasyui.com/tutorial/dd/dnd2_demo.html
• 课程表拖放：https://www.jeasyui.com/tutorial/dd/dnd3.php

如果需要添加删除功能、完整源码下载、或结合后端持久化，请提供更多细节！