i new jquery.i want limit number of items dragged in droppable shopping cart.
eg:shopping cart should accept 3 items on drop after should not accept item.
jsfiddle:http://jsfiddle.net/vwu37/
i have tried other duplicates din't work me.. 1 out there please me.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui build web page easily!"> <title>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"> <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> <style type="text/css"> .products{ list-style:none; margin-right:300px; padding:0px; height:100%; } .products li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ position:fixed; right:0; top:0; width:300px; height:100%; background:#ccc; padding:0px 10px; } h1{ text-align:center; color:#555; } h2{ position:absolute; font-size:16px; left:10px; bottom:20px; color:#555; } .total{ margin:0; text-align:right; padding-right:20px; } </style> <script> var data = {"total":0,"rows":[]}; var totalcost = 0; $(function(){ $('#cartcontent').datagrid({ singleselect:true }); $('.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'; } }); $('.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 addproduct(name,price){ 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; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalcost += price; $('#cartcontent').datagrid('loaddata', data); $('div.cart .total').html('total: $'+totalcost); } </script> </head> <body style="margin:0;padding:0;height:100%;background:#fafafa;"> <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> <li> <a href="#" class="item"> <img src="images/shirt3.gif"/> <div> <p>elephant</p> <p>price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt4.gif"/> <div> <p>stamps</p> <p>price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt5.gif"/> <div> <p>monogram</p> <p>price:$25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="images/shirt6.gif"/> <div> <p>rolling</p> <p>price:$25</p> </div> </a> </li> </ul> <div class="cart"> <h1>shopping cart</h1> <div style="background:#fff"> <table id="cartcontent" fitcolumns="true" 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> </div> <p class="total">total: $0</p> <h2>drop here add cart</h2> </div> </body> </html>
here go.. modified addproduct function check 3 items in data.total. if not give alert..
try this
function addproduct(name,price){ if(data.total < 3){ 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; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalcost += price; $('#cartcontent').datagrid('loaddata', data); $('div.cart .total').html('total: $'+totalcost); }else{ alert('cannot have more 3 itrems'); } } updated
if need check quantity then.. check quantity instead of total.. :)
try this
function addproduct(name,price){ var totalquantity=sumquantity(data); if(totalquantity < 3){ 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; data.rows.push({ name:name, quantity:1, price:price }); } add(); totalcost += price; $('#cartcontent').datagrid('loaddata', data); $('div.cart .total').html('total: $'+totalcost); }else{ alert('cannot have more 3 itrems'); } } //new function sum quantity. function sumquantity(data){ var sum=0; for(var i=0; i<data.total; i++){ sum += data.rows[i].quantity; } return sum; } 
Comments
Post a Comment