Get images coords

[Hick]

Hi i want to use "Dragable elements Script" http://www.dynamicdrive.com/dynamicindex4/image3.htm

I wounder how I can get the images coord where the user put the images.

I will have a soccer feald with eleven players the user can put the player any where in the feald then push a save button. then the coords will be saved in a database.

Did anyone understan my question and my bad english??

[djr33]

That's very complex.

Actually, getting the coordinates isn't that hard, perhaps.... but the rest is.

Do you already have the database configured?

I wouldn't worry about this if you haven't... deal with this, then that if it goes well.


The easiest way that comes to mind is clicking on an image in a form.

A form, when submitted has:
imagename_x and imagename_y as values (based on the element name in the form)
(if <input type="image" src="image.jpg" name="imagename">)

Images, in a form, act as a submit button, plus the addition of sending the x/y coords.

If you had them click on the point on the image of the field they want to go, then that would be easy...


As for actually dragging and dropping the image using that script, I'm not really sure how you'd determine the x/y values.
however, i'm sure they're available in the code... just look for the values of x and y, and then use those.

Not sure how you could transfer them.... maybe ajax.

Or, you could submit and have javascript submit the x/y values as an extra javascript created fields in the form onSubmit, then use php (etc.) to add them to your database.

[Hick]

Thanks for helping me djr33!

The database is no problem and php should not be a problem either.

My plan is to get the cords in a hidden field like this
$player1x = ???
$player1y = ???
$player2x = ???
$player2y = ???
<field type=hidden name=player1x value=$player1x>
<field type=hidden name=player1y value=$player1y>
<field type=hidden name=player2x value=$player2x>
<field type=hidden name=player2y value=$player2y>

And the problem is to get the ???, i belive that the information i will have is in the javascript but iam not good att javascript so i cant find it.
Somewhere when you relese the mouse button the scripts must regist the cords, or?

[Hick]

I get this code in a swedish forum so now I have some code to work with...
Thanks all for you help, i will post the code when iam finished.

<style type="text/css">

.drag{
position:relative;
cursor:hand;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Drag and Drop Script: &#169; 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"
document.testDrag.dragY.value=this.offsety+evtobj.clientY-this.y+"px"
document.testDrag.dragX.value=this.offsetx+evtobj.clientX-this.x+"px"
return false

}
}
}

dragobject.initialize()

</script>

<img src="stewie.gif" height="100" width="100" class="drag"><br><br>
<form name="testDrag" action="">
Y:<input type="text" value="" name="dragY">
X:<input type="text" value="" name="dragX">
</form>

[blm126]

It seems they are stored in dragobject.offsetx and dragoffsety

[mburt]

Use JavaScript to define the variables, and send the data to the input fields, and then use $_POST["field name"] to call the coord

[djr33]

Glad it's working out.
Sweden? I have a friend there. But I doubt you'd know him.

[vgsangiuliano]

Great. I have the same problem:
I have my database with a 3 columns table. The columns are imagenumber (key) image_x_position an image_y_position.
X_position and y_position columns have initial value set by me. These values are those who make possible to display the images in the php page in the default position.
When a user reach via browser this php page, I need a php code that connects to this db, get the value of x and y of each image and display the page; really the first user who displays the page will view the images in the position set by me.
Images are draggable so a user can drag them within the page.
I also need a php code that overwrite the new x and y positions set by this user into the db so the next user who call the page via browser, will display a page different from the default one because images position is load from the db and it is equal to the position set by the previous user.

I hope that someone coul help me because I'm a newbie and I understood what I have to do but I don't be able to write the code to do it.
Could someone explain me what I have to do in details?
Please
Help me