Search code examples
javascripthtmlcssgridviewprototypejs

Arranging elements on the screen and saving their positions


I want to build a tool (with HTML5, JS and CSS3), which helps customers to arrange elements on a website mockup (e.g. text blocks and pictures). I want to save the position of these elements in order to reconstruct the whole mockup website later.

Maybe a grid system would be the best?

alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png

I would be happy to get some ideas on approaches for this challenge. Are there any similar projects, I should take a look at?

Regards,

Stefan


Solution

  • 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.