在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下:
效果图:
具体代码如下
显示页面上的商品:
正如您所看到的上面的代码,我们添加一个包含一些
元素中。
创建购物车:
Shopping Cart
Name Quantity Price Total: $0
Drop here to add to cart
我们使用数据网格(datagrid)来显示购物篮中的物品。
拖动克隆的商品:
$('.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'; } });
请注意,我们把 draggable 属性的值从 'proxy' 设置为 'clone',所以拖动元素将由克隆产生。
放置选择商品到购物车中
$('.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){ var name = $(source).find('p:eq(0)').html(); var price = $(source).find('p:eq(1)').html(); addProduct(name, parseFloat(price.split('$')[1])); } }); var data = {"total":0,"rows":[]}; var totalCost = 0; function addProduct(name,price){ function add(){ for(var i=0; i 登录后复制
每当放置商品的时候,我们首先得到商品名称和价格,然后调用 'addProduct' 函数来更新购物篮。
EasyUI实现拖放商品放置购物车的功能就介绍到这,有了本文为大家提供的实例,相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计,谢谢大家的阅读。
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供