jQuery EasyUIチュートリアルを使用してドラッグアンドドロップのカートを作成
7309 ワード
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 > 上記のコードで見たように、商品を表示するためにli要素が含まれているul要素を追加しました.各商品の名前と価格属性は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に関する記事をクリックしてご覧ください!