Jump to content

calling info from mysql based on a drag and dropped location


wright67uk

Recommended Posts

I have a very basic page which I have mocked up to use as a referance point;

 

www.1pw.co.uk/drag.html

Page works in IE

 

What I would like to do is to;

 

1) change the value of the image of my products from 'No' to 'Yes' when it enters the red square

2) pull some further info from a database about each of the products which have a value of 'Yes' . ie price, size etc. and display the info below the red box.

 

Im guessing the first point would involve mapping out some co-ordinates.

 

Could anyone explain a theory behind the correct way of doing this.

Could anyone guide me to a decent tutorial or step by step guide?

 


<!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>Drag and Drop</title>

<style>
<!--
.drag{position:relative;cursor:hand}
#box {width:200px; height:200px; margin-right:auto; margin-left:auto; background-color:#F00;}
--></style>
<script language="JavaScript1.2"> 
<!--

/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

</head>

<body>
<img src="star.png" class="drag" value="no"/>
<img src="grass.png" class="drag" value="no"/>
<div id="box"></div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.