SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replicating an image when drag and dropped

    I have a mocked up page


    http://www.1pw.co.uk/demo.html


    After dragging an image over the bowl background I would a copy of the image to stay in situe.

    eg. If i were to drag the baloon shirt to the bowl three times, then I would see three baloon shirts in my bowl.

    obviously the image would need to shrink somewhat to be able to fit.

    What is the best way of achieving this and how do I go about it?

    Many thanks.

    Code:
    <!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;
    			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;
    			background-image:url(bowl.jpg); background-repeat:no-repeat; background-position:center;
    		}
    		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="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>
    		<li>
    			<a href="#" class="item">
    				<img src="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 to add to cart</h2>
    	</div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could tell you how I do it, but it would be overkill for your purposes.

    There are many tutorials that explain this very trick online. The main steps are:

    * Get the files property from the drag event.
    * Use a FileReader to get the file content as a data URL.
    * Create an IMG element and set its src attribute to the data URL.

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thankyou

    im not sure how i get a file property from my drag event though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •