Jump to content

help with a drag and drop image append

wright67uk

By wright67uk
in PHP Coding Help

 Share

Recommended Posts

wright67uk Advanced Member

wright67uk

Posted
Posted

Hello im looking for a little help with my script,

 

im hosting the files at  www.1pw.co.uk/demo.php

 

After dragging an image into the shopping basket, I would like a thumbnail image to appear in the div at the bottom of the page (  .bowlpic)  is this possible and what is the easiest way of going about it?

 

demo.php

<?php

define('INCLUDE_CHECK',1);
require "connect2.php";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shop</title>

<link rel="stylesheet" type="text/css" href="demo.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>

<!--[if lt IE 7]>
<style type="text/css">
.pngfix { behavior: url(pngfix/iepngfix.htc);}
    .tooltip{width:200px;};
</style>
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script>


<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main-container">
<div class="tutorialzine">
    <h1>Shopping cart</h1>
    <h3>The best products at the best prices</h3>
    </div>

    <div class="container">
    
    	<span class="top-label">
            <span class="label-txt">Products</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drag-desired">
            	
                <?php

			$result = mysql_query("SELECT * FROM internet_shop");
			while($row=mysql_fetch_assoc($result))
			{
				echo '<div class="product"><a href="#" class="item"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></a></div>';

			}

			?>
                
                
       	        <div class="clear"></div>
            </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>



    <div class="container">
    
    	<span class="top-label">
            <span class="label-txt">Shopping Cart</span>
        </span>
        
        <div class="content-area">
    
    		<div class="content drop-here">
            	<div id="cart-icon">
            	<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
				<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

			<form name="checkoutForm" method="post" action="order.php">
                
                <div id="item-list">
                </div>
                
			</form>                
                <div class="clear"></div>

			<div id="total"></div>

       	        <div class="clear"></div>
                
                <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
                
          </div>

        </div>
        
        <div class="bottom-container-border">
        </div>

    </div>

</div>

</body>
</html>

 

script.js

var purchased=new Array();
var totalprice=0;

$(document).ready(function(){

$('.product').simpletip({

	offset:[40,0],
	content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
	onShow: function(){

		var param = this.getParent().find('img').attr('src');

		if($.browser.msie && $.browser.version=='6.0')
		{
			param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);
			param = param[1];
		}

		this.load('ajax/tips.php',{img:param}); 
	} 

});

$(".product img").draggable({

containment: 'document',
opacity: 0.6,
revert: 'invalid',
helper: 'clone',
zIndex: 100

});

$("div.content.drop-here").droppable({

		drop:
				function(e, ui)
				{
					var param = $(ui.draggable).attr('src');

					if($.browser.msie && $.browser.version=='6.0')
					{
						param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
						param = param[1];
					}

					addlist(param);
				}

});

});


function addlist(param)
{
$.ajax({
type: "POST",
url: "ajax/addtocart.php",
data: 'img='+encodeURIComponent(param),
dataType: 'json',
beforeSend: function(x){$('#ajax-loader').css('visibility','visible');},
success: function(msg){

	$('#ajax-loader').css('visibility','hidden');
	if(parseInt(msg.status)!=1)
	{
		return false;
	}
	else
	{
		var check=false;
		var cnt = false;

		for(var i=0; i<purchased.length;i++)
		{
			if(purchased[i].id==msg.id)
			{
				check=true;
				cnt=purchased[i].cnt;

				break;
			}
		}

		if(!cnt)
			$('#item-list').append(msg.txt);

		if(!check)
		{
			purchased.push({id:msg.id,cnt:1,price:msg.price});
		}
		else
		{
			if(cnt>=3) return false;

			purchased[i].cnt++;
			$('#'+msg.id+'_cnt').val(purchased[i].cnt);
		}

		totalprice+=msg.price;
		update_total();

	}

	$('.tooltip').hide();

}
});
}

function findpos(id)
{
for(var i=0; i<purchased.length;i++)
{
	if(purchased[i].id==id)
		return i;
}

return false;
}

function remove(id)
{
var i=findpos(id);

totalprice-=purchased[i].price*purchased[i].cnt;
purchased[i].cnt = 0;

$('#table_'+id).remove();
update_total();
}

function change(id)
{
var i=findpos(id);

totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;

purchased[i].cnt=parseInt($('#'+id+'_cnt').val());
update_total();
}

function update_total()
{
if(totalprice)
{
	$('#total').html('total: $'+totalprice);
	$('a.button').css('display','block');
}
else
{
	$('#total').html('');
	$('a.button').hide();
}
}

 

 

demo.css

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}

body{
color:#555555;
font-size:13px;
background-color:#282828;
}

.clear{
clear:both;
}

#main-container{
width:700px;
margin:20px auto;
}

.container{
margin-bottom:40px;
}

.top-label{
background:url(img/label_bg.png) no-repeat;
display:inline-block;
margin-left:20px;
position:relative;
margin-bottom:-15px;
}

.label-txt{
background:url(img/label_bg.png) no-repeat top right;
display:inline-block;
font-size:10px;
height:36px;
margin-left:10px;
padding:12px 15px 0 5px;
text-transform:uppercase;
}

.content-area{
background:url(img/container_top.png) no-repeat #fcfcfc;
padding:15px 20px 0 20px;
}

.content{
padding:10px;
}

.drag-desired{
background:url(img/drag_desired_label.png) no-repeat top right;
padding:30px;
}

.drop-here{
background:url(img/drop_here_label.png) no-repeat top right;
}


.bottom-container-border{
background:url(img/container_bottom.png) no-repeat;
height:14px;
}

.product{
border:2px solid #F5F5F5;
float:left;
margin:15px;
padding:10px;
}

.product img{
cursor:move;
}

p.descr{
padding:5px 0;
}

small{
display:block;
margin-top:4px;
}

.tooltip{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;

background-color:#666666;
border:1px solid #666666;
color:#fcfcfc;

padding:10px;

-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}

#cart-icon{
width:128px;
float:left;
position:relative;
}

#ajax-loader{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
}

#item-list{
float:left;
width:490px;
margin-left:20px;
padding-top:15px;
}

a.remove,a.remove:visited{
color:red;
font-size:10px;
text-transform:uppercase;
}

#total{
clear:both;
float:right;
font-size:10px;
font-weight:bold;
padding:10px 12px;
text-transform:uppercase;
}

#item-list table{
background-color:#F7F7F7;
border:1px solid #EFEFEF;
margin-top:5px;
padding:4px;
}

a.button,a.button:visited{
display:none;

height:29px;
width:136px;

padding-top:15px;
margin:0 auto;
overflow:hidden;

color:white;	
font-size:12px;
font-weight:bold;
text-align:center;
text-transform:uppercase;

background:url(img/button.png) no-repeat center top;
}

a.button:hover{
background-position:bottom;
text-decoration:none;
}


a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}

a:hover{
text-decoration:underline;
}

h1{
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
font-weight:normal;
font-size:20px;

color:#666666;
text-indent:30px;
margin:20px 0;
}

.tutorialzine h1{
color:white;
margin-bottom:10px;
font-size:48px;
}

.tutorialzine h3{
color:#F5F5F5;
font-size:10px;
font-weight:bold;
margin-bottom:30px;
text-transform:uppercase;
}

.tutorial-info{
color:white;
text-align:center;
padding:10px;
margin-top:-20px;
}

*/ added myself */
.icon-blank{
background:url('icons/blank.gif') no-repeat;
}
.icon-add{
background:url('icons/edit_add.png') no-repeat;
}
.icon-edit{
background:url('icons/pencil.png') no-repeat;
}
.icon-remove{
background:url('icons/edit_remove.png') no-repeat;
}
.icon-save{
background:url('icons/filesave.png') no-repeat;
}
.icon-cut{
background:url('icons/cut.png') no-repeat;
}
.icon-ok{
background:url('icons/ok.png') no-repeat;
}
.icon-no{
background:url('icons/no.png') no-repeat;
}
.icon-cancel{
background:url('icons/cancel.png') no-repeat;
}
.icon-reload{
background:url('icons/reload.png') no-repeat;
}
.icon-search{
background:url('icons/search.png') no-repeat;
}
.icon-print{
background:url('icons/print.png') no-repeat;
}
.icon-help{
background:url('icons/help.png') no-repeat;
}
.icon-undo{
background:url('icons/undo.png') no-repeat;
}
.icon-redo{
background:url('icons/redo.png') no-repeat;
}
.icon-back{
background:url('icons/back.png') no-repeat;
}
.icon-sum{
background:url('icons/sum.png') no-repeat;
}
.icon-tip{
background:url('icons/tip.png') no-repeat;
}

.icon-mini-add{
background:url('icons/mini_add.png') no-repeat 2px 2px;
}
.icon-mini-edit{
background:url('icons/mini_edit.png') no-repeat 2px 2px;
}
.icon-mini-refresh{
background:url('icons/mini_refresh.png') no-repeat 3px 2px;
}

.products{
		list-style:none;
		padding:0px;
		height:100%;
	}
	.products li{
		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;
text-align: left;
	}
	.total{
		margin:0;
		text-align:right;
		padding-right:20px;
	}
	#productpics {
		height:300px; width:1000px;
	}
	#arrow {height:300px; width:300px; float:left;
	}

Link to comment
https://forums.phpfreaks.com/topic/256280-help-with-a-drag-and-drop-image-append/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.