wright67uk Posted January 28, 2012 Share Posted January 28, 2012 Hello; http://www.1pw.co.uk/demo3.html How can i change my javascript to ensure that images being dropped, never overflow div.bowlpic? Many thanks <!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 help you build your web page easily!"> <title>Drag and Drop Demo</title> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.ui.main.js"></script> <style type="text/css"> .products{ list-style:none; 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; } .bowlpic { height:300px; width:260px; overflow:none; background-image:url(bowl.jpg); background-repeat:no-repeat; background-color:#FF0000; float:left; } 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; } #productpics { height:300px; width:1000px; } #arrow {height:300px; width:300px; float:left; } </style> <script> var data = {"total":0,"rows":[]}; var totalCost = 0; var bowlItems = 10; $(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'; } }); $('.bowlpic').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])); bowlItems = bowlItems + 50; $('.bowlpic').append('<img style="width: 50px; position: absolute; margin-left:'+ bowlItems +'px;" src="' + $(source).children().attr('src') +'"/>'); } }); }); 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;"> <div id="productpics"> <ul class="products"> <li> <a href="#" class="item"> <img src="shirt1.gif"/> <div> <p>Balloon</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt2.gif"/> <div> <p>Feeling</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt3.gif"/> <div> <p>Elephant</p> <p>Price:£25</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt4.gif"/> <div> <p>Stamps</p> <p>Price:£333</p> </div> </a> </li> <li> <a href="#" class="item"> <img src="shirt5.gif"/> <div> <p>Monogram</p> <p>Price:£25</p> </div> </a> </li> </ul> </div> <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> </div> <div class="bowlpic"></div> <div id="arrow"><p> < drag to here</p></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
joel24 Posted January 28, 2012 Share Posted January 28, 2012 if the width of the bowlitems is greater than the width of the image, put it on a new line with margin-top... I would store each row of bowlitems in an array, if the row exceeds the image width, then start a new row in the array or if you just don't want to show those images which exceed, use an if condition to check Quote Link to comment Share on other sites More sharing options...
wright67uk Posted January 29, 2012 Author Share Posted January 29, 2012 "I would store each row of bowlitems in an array, if the row exceeds the image width, then start a new row in the array" Thankyou, Are you saying that if only 5 images fit into a row and the user drops a 6th image, then the 6th image would go to the next row in the array? Im quite new to arrays etc. How can i implement this in my code? Thanks for the reply! Quote Link to comment Share on other sites More sharing options...
joel24 Posted January 29, 2012 Share Posted January 29, 2012 might be easier to use css and "float:left" - then on every 5th element, add css "clear:both;" Quote Link to comment Share on other sites More sharing options...
wright67uk Posted January 29, 2012 Author Share Posted January 29, 2012 i can use float left however the 5th element doesnt exist until the user has done the drag and drop? ' Quote Link to comment Share on other sites More sharing options...
joel24 Posted January 31, 2012 Share Posted January 31, 2012 you'll have to handle the dynamic dom elements - live() , either that or have a global count variable and increment it each time a element is dropped. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.