hi aso186 thanks for the reply. i sort of understand the priciple in what you are saying and it makes sence to me but I am not a software engineer by any stretch of the imagination.
this is my code. could you give me an idea of what is required and where it needs to go so that I have a model to work with. I know this is a bit cheeky but it really would help me.
You will see from the code at the end that I need to drop the correct answer below the correct sign.
I know this code doesnt look too elegant but i am more concerned with it being functional than pretty!!
- HTML: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="setup_style.css">
<title>class</title>
<style type="text/css">
p {margin-left: 90px}
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
</head>
<body>
<table border="1" height=15% width=100% align=left bgcolor="#ffffcc">
<td><h3>Cirlular signs give orders. Drag and drop the answer you think best describes each sign.</h3></td>
</table>
<br><br><br><br><br><br><br>
<table border="0" width=90% height=5% align=center>
<td><h3><b class="drag">National Speed Limit</b></h3></td>
<td><h3><b class="drag">Max Speed Limit</b></h3></td>
<td><h3><b class="drag">End Min Speed Limit</b></h3></td>
<td><h3><b class="drag">Min Speed Limit</b></h3></td>
</table>
<br><br><br><br>
<table border="0" width=80% height=30% align=center>
<td><img src="end min speedlimit.jpg"></td>
<td><img src="min speedlimit.jpg"></td>
<td><img src="national speedlimit.jpg"></td>
<td><img src="40mph.jpg"></td>
</table>
<br>
<table border="0" width=10% align=right>
<form action="unit1_p3.php" method="POST">
<input type="submit" value="NEXT">
</form>
</table>