雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车
Posted pengpeng1208
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车相关的知识,希望对你有一定的参考价值。
jQuery EasyUI 拖放 - 创建拖放的购物车
如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西。通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能。
在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面。购物篮中的物品和价格将更新。
显示页面上的商品
正如您所看到的上面的代码,我们添加一个包含一些
- 元素的
- 元素来显示商品。所有商品都有名字和价格属性,它们包含在
元素中。
创建购物车
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<data.total; p="" i++){<="">
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
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);
}
每当放置商品的时候,我们首先得到商品名称和价格,然后调用 ‘addProduct‘ 函数来更新购物篮。
下载 jQuery EasyUI 实例
jeasyui-dd-shopping.zip
本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)
以上是关于雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车的主要内容,如果未能解决你的问题,请参考以下文章
雷林鹏分享:jQuery EasyUI 拖放 - 创建拖放的购物车
雷林鹏分享:jQuery EasyUI 窗口 - 窗口与布局
雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格
雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建链接按钮