Drag & Drop on web page

[Xrproto]

I currently have a page that allows the user to input coordinates into some input fields to arrange stats (text) on an image then save the results to an image file. It’s all coded in PHP and I’m looking at making it simpler for someone to use by making so the can drag & drop each stat field where ever they want to on the background image and save it to an image file when they are done.

Now what I’m going to need to do is update my database with the coordinates of each stat on where they dropped it when they save it. I will also need to have it set up so the can’ drag the stats outside of the background images area ie: 500X500 area or 200X200 area.

What I’m looking for is some guidance on how to approach this. I’ve done little with drag & drop with javascript so any snippets that are close to what I’m looking to do would make this development process go quicker for me.

 

[DavidR]

Have you looked into using prototype and scriptaculous?

 

[Xrproto]

Have you looked into using prototype and scriptaculous?

No I haven't. looking now.

 

[Xrproto]

I do have a snippet that allows drag & drop but I need to firgure out how to constrain it within boaders. Like loading it in a iframe that is 500x500 and not being able to drag the items out of that area.

Once I get that I'm on easy street.

 

[Xrproto]

Well I've got it working and constrained to the limits of an iframe. now I just need to grab the cooridnates of ever stat and save them when click.

 

[Squirrelinabox]

It sounds like you've already got a drag and drop solution, but in case you're still looking:

JavaScript: DHTML Library, Drag & Drop for Images and Layers

That script is the best drag and drop script out there in my opinion. You can drag and drop, resize, change the transparency, and a whole lot more. You can do it with text as well as images. The code is also pretty clean and fairly object oriented so it's pretty easy to work with for being so powerful and versitile.

 

[Xrproto]

It sounds like you've already got a drag and drop solution, but in case you're still looking:

JavaScript: DHTML Library, Drag & Drop for Images and Layers

That script is the best drag and drop script out there in my opinion. You can drag and drop, resize, change the transparency, and a whole lot more. You can do it with text as well as images. The code is also pretty clean and fairly object oriented so it's pretty easy to work with for being so powerful and versitile.

Nice script, just looking through gives more function then what I had added.

Thanks.