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的文章！