Drag and drop image position storage

birwin

I have a site using PHP and mySQL. Is there any way to save the position of images that are dragged on the screen using the "drag and drop" DHTML scripts such as http://www.dynamicdrive.com/dynamicindex4/image3.htm on the Dynamic Drive website.

I am looking for a way to save the names and positions of the dragged pictures so that they can be recalled. I would save the information in a database (I use PHP and mySQL) so that it could be recalled on future visits to the site.

I would use this to allow viewers to create retail displays from a group of pictures of products. The various products have different sizes. Viewers would arrange the products on a sizeable display space to make sure that the display would fit in their store. (This is called planogramming in the retail trade). Once they have positioned the product pictures I want them to be able to save that display arrangement for future viewing or editing.

I realize that this is not primarily a PHP question but I know from past experience that many of you are very bright "cross discipline" coders. Any ideas how to do this?

Brian Irwin

Anon

Use a JavaScript so that whenever the images' position are changed, you update a hidden field that contains the coordinates. When the user is done, you submit the form with the hidden fields and put the coordinates into the db.

Diego

birwin

Thanks Diago:

Can you (or anyone else) give me some guidance on how to do that? I am very familiar with PHP but I don't have any Java experience.

Brian

Anon

Well, you'll have a function that moves the layers, right? So at the end of that function you'll have something like:

document.formName.fieldName.value = Xcoord + ',' + Ycoord;

where Xcoord and Ycoord are the variables for the coordinates.

Then your form field will be:

Now your PHP script will take
$fieldName, split in the comma, and you'll have the coordinates.

Diego

birwin

Thanks again for the help. Unfortunately I couldn't get it to work.

The following is the existing drag and drop code. Could anyone help me with the code to send the position variable for all three images to another page where I will use PHP to process them?

<head>
<style>

</style>
<script language="JavaScript1.2">

</script>
</head>
<body>
<img src="/Rewards/A_logo.jpg" class="drag"><br>
<img src="/Rewards/B_logo.jpg" class="drag"><br>
<h1><b class="drag">Hi there</b></h1>
</body>

Brian