jQuery EasyUI使用教程之创建一个拖放的购物车

<jQuery EasyUI最新版下载>

如果你能利用你的web应用程序很容易地实现简单的拖放，那么你一定知道一些特别的东西，使用jQuery EasyUI，我们能在web应用程序中简单地实现拖放功能。

在本教程中，我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。

查看演示

在页面上显示商品：

< ul class = "products" >
< li >
< a href = "#" class = "item" >
< img src = "images/shirt1.gif" >
< div >
< p >Balloon</ p >
< p >Price:$25</ p >
</ div >
</ a >
</ li >
< li >
< a href = "#" class = "item" >
< img src = "images/shirt2.gif" >
< div >
< p >Feeling</ p >
< p >Price:$25</ p >
</ div >
</ a >
</ li >
<!-- other products -->
</ ul >

正如你在上面代码中看到的一样，我们添加了一个ul元素，其中包含了一些li元素来显示商品。每个商品的名字和价格属性都包含在p元素中。

创建购物车：

< div class = "cart" >
< h1 >Shopping Cart</ h1 >
< table id = "cartcontent" style = "width:300px;height:auto;" >
< thead >
< tr >
< th field = "name" width = "140" >Name</ th >
< th field = "quantity" width = "60" align = "right" >Quantity</ th >
< th field = "price" width = "60" align = "right" >Price</ th >
</ tr >
</ thead >
</ table >
< p class = "total" >Total: $0</ p >
< h2 >Drop here to add to cart</ h2 >
</ div >

我们使用数据网格来显示购物车的物品。

拖动复制的商品：

$( '.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' ;
}
});

请注意，我们将可拖动属性'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++){
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'函数来更新购物车。

下载该EasyUI示例：easyui-shopping-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章！