Arranging elements on the screen and saving their positions

Answer 1

The jQuery framework would help you in synchronizing the JS and DHTML events. As far as other projects that use this, I'm not aware of any, but a grid model seems like a good way to go. Just make sure it's more precise than the 125px you currently have :)

EDIT: The website that was mentioned in the DHTML book I mentioned in my comment was http://www.panic.com . You can take a look at their JavaScript code for some inspiration, as they implement a drag and drop system for downloading their products.

Answer 2

YUI has lots of widgets for this sorta thing with lots of examples.

http://developer.yahoo.com/yui/examples/dragdrop/index.html

Especially this example

http://developer.yahoo.com/yui/examples/dragdrop/dd-groups.html

All you would have to do register a listener on the drop event to send an ajax request to the server and save the xy co-ordinates.

ALSO, if you want to do resizing as well

http://developer.yahoo.com/yui/examples/resize/index.html

They have a few really neat examples, including this image cropper

http://developer.yahoo.com/yui/examples/imagecropper/feedback%5Fcrop.html

Answer 3

Not sure if it'll help, but my "PanelManager" might make things a little easier (if you're not already using a larger framework with similar functionality):

DP_PanelManager

"Panels" are just normal DOM elements with extensions for common actions/modifications (moving, resizing, etc). Panels can exist within one or more "PanelManagers" which allow you to treat them as a single unit (sorting, looping, etc).

Look at the example "Drag-and-Drop with Ordering" for a simplified example of (what I think) you're looking for. You would then need to do the same kind of looping to save whatever information you want (probably just name and position).

In any case there might be some code there you can rip out - feel free to fold, spindle and/or mutilate.