Shopping cart example using draggable plugin - jQuery EasyUI framework.
What is jQuery EasyUI framework ?
jQuery EasyUI offers a full collection of components including powerful datagrid, treegrid, panel, combo and more for building cross-browser web page. Users can use them all together, or just use some components he wants.
First we load our easyUI javascript's and stylesheets, and create a table to represent the cart structure,like below.
HTML:
<html style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
<h2>Shopping Cart</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
<div class="cart">
<div class="ctitle">Shopping Cart</div>
<div style="background:#fff">
<table id="cartcontent" fitColumns="true" style="width1: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>
<th field="remove" width=100 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
</div>
<div class="products">
<ul>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
It's time for Javascript action.
JAVASCRIPT:
$(function(){
// we call datagrid function on table we created in HTML.
$('#cartcontent').datagrid({
singleSelect:true,
showFooter:true
});
// on elements with class "item", draggable method to specify it as draggable.
$('.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';
}
});
// on elements with class "cart", droppable method to drop area.
$('.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]));
}
});
});
function remove(rowID,rowIndex){
$('tr#'+rowID).remove();
var dg = $('#cartcontent');
dg.datagrid('deleteRow', rowIndex);
setTimeout(function(){
dg.datagrid('reload');
dg = $('#cartcontent');
var data = dg.datagrid('getData');
var rows = dg.datagrid('getRows');
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total -= 1;
}
add();
dg.datagrid('loadData', data);
dg.datagrid('reload');
var cost = 0;
for(var i=0; i<rows.length; i++){
cost += rows[i].price*rows[i].quantity;
}
dg.datagrid('reloadFooter', [{name:'Total',price:cost}]);
$('.remove').click(function() {
var rowID= $(this).closest('tr').attr('id');
var rowIndex= $(this).attr('id');
remove(rowID,rowIndex);
});
},1000);
}
function addProduct(name,price){
var dg = $('#cartcontent');
var data = dg.datagrid('getData');
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.rows.push({
name:name,
quantity:1,
price:price,
remove:'<a id="'+data.total+'" class="remove" href="javascript:;">remove</a>'
});
data.total += 1;
}
add();
dg.datagrid('loadData', data);
var cost = 0;
var rows = dg.datagrid('getRows');
for(var i=0; i<rows.length; i++){
cost += rows[i].price*rows[i].quantity;
}
dg.datagrid('reloadFooter', [{name:'Total',price:cost}]);
$('.remove').click(function() {
var rowID= $(this).closest('tr').attr('id');
var rowIndex= $(this).attr('id');
remove(rowID,rowIndex);
});
}
What is jQuery EasyUI framework ?
jQuery EasyUI offers a full collection of components including powerful datagrid, treegrid, panel, combo and more for building cross-browser web page. Users can use them all together, or just use some components he wants.
- easyui is a collection of user-interface plugin based on jQuery.
- easyui provides essential functionality for building modern, interactive, javascript applications.
- using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.
- complete framework for HTML5 web page.
- easyui save your time and scales while developing your products.
- easyui is very easy but powerful.
First we load our easyUI javascript's and stylesheets, and create a table to represent the cart structure,like below.
HTML:
<html style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
<h2>Shopping Cart</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
<div class="cart">
<div class="ctitle">Shopping Cart</div>
<div style="background:#fff">
<table id="cartcontent" fitColumns="true" style="width1: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>
<th field="remove" width=100 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
</div>
<div class="products">
<ul>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="http://placehold.it/180x180"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
It's time for Javascript action.
JAVASCRIPT:
$(function(){
// we call datagrid function on table we created in HTML.
$('#cartcontent').datagrid({
singleSelect:true,
showFooter:true
});
// on elements with class "item", draggable method to specify it as draggable.
$('.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';
}
});
// on elements with class "cart", droppable method to drop area.
$('.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]));
}
});
});
function remove(rowID,rowIndex){
$('tr#'+rowID).remove();
var dg = $('#cartcontent');
dg.datagrid('deleteRow', rowIndex);
setTimeout(function(){
dg.datagrid('reload');
dg = $('#cartcontent');
var data = dg.datagrid('getData');
var rows = dg.datagrid('getRows');
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total -= 1;
}
add();
dg.datagrid('loadData', data);
dg.datagrid('reload');
var cost = 0;
for(var i=0; i<rows.length; i++){
cost += rows[i].price*rows[i].quantity;
}
dg.datagrid('reloadFooter', [{name:'Total',price:cost}]);
$('.remove').click(function() {
var rowID= $(this).closest('tr').attr('id');
var rowIndex= $(this).attr('id');
remove(rowID,rowIndex);
});
},1000);
}
function addProduct(name,price){
var dg = $('#cartcontent');
var data = dg.datagrid('getData');
function add(){
for(var i=0; i<data.total; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.rows.push({
name:name,
quantity:1,
price:price,
remove:'<a id="'+data.total+'" class="remove" href="javascript:;">remove</a>'
});
data.total += 1;
}
add();
dg.datagrid('loadData', data);
var cost = 0;
var rows = dg.datagrid('getRows');
for(var i=0; i<rows.length; i++){
cost += rows[i].price*rows[i].quantity;
}
dg.datagrid('reloadFooter', [{name:'Total',price:cost}]);
$('.remove').click(function() {
var rowID= $(this).closest('tr').attr('id');
var rowIndex= $(this).attr('id');
remove(rowID,rowIndex);
});
}
DEMO Link http://jsbin.com/defeqogu/4
No comments:
Post a Comment