ondrop code help needed please

paulf · May 4th, 2008, 21:55

Hi all ... I am trying to write a training piece that will run from my website.

I need help coding ondrop. The user will have four pics and they have to drag a description and drop it under the correct pic.

I have managed to code the drag and drop bit with javascript but cant find any code to help me evaluate the position dropped and give responce. ie correct position or not correct position.

Any help would be gratefully appreciated.

aso186 · May 4th, 2008, 22:04

You'd probably have to use the onmouseup event (I presume the user has to click and drag whilst holding the button down?)

When the user has released the mouse button, get the position of the element using offsetHeight and offsetWidth.

Then you can compare these results to those of the correct answer position. If they match within X pixels (so the user doesn't have to drop it in the *absolute* correct position), then they've got the answer right!

paulf · May 6th, 2008, 02:49

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>

aso186 · May 6th, 2008, 11:21

Will try and have a look Paul, but this really isn't my skill! Hang around and see if a few experts can help you out

Moved to JavaScript Forum

CloudedVision · May 6th, 2008, 13:24

I would use mootools for this, it would make programming the drag and drop easier. The beta is very and stable and much better documentation.

Hope that helps.

spinal007 · May 6th, 2008, 19:56

Since mootools has been suggested, I'll leave my 2 cents: I recommend jQuery. It makes everything in javascript easier, takes care of most cross-browser issue, etc, etc...
Mootools is great, but I think jQuery is easier to learn and more newbie-friendly...

paulf · May 6th, 2008, 22:12

Hi guys thanks to you all for your thought ... I feel important now all the mods replying to me. Unfortunately I am none the wiser about resolving the problem but thanks and I'll take a look at the suggestions

spinal007 · May 7th, 2008, 08:50

aso's suggestion seemed good enough to solve the problem, how did you get on?