I have a mocked up page
[URL=“http://www.1pw.co.uk/demo.html”]
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.
<!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>