元素来显示商品。所有商品都有名字和价格属性,它们包含在 元素中。
创建购物车:
rush:xhtml;">
Shopping Cart
Drop here to add to cart
我们使用数据网格(datagrid)来显示购物篮中的物品。
拖动克隆的商品:
rush:js;">
$('.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',所以拖动元素将由克隆产生。
放置选择商品到购物车中
rush:js;">
$('.cart').droppable({
on
dragenter: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实现拖放商品放置购物车的功能就介绍到这,有了本文为大家提供的实例,相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计,谢谢大家的阅读。
原文地址:https://www.jb51.cc/jquery/51387.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。