CODEWITHSUNDEEP
javascripthtmlcssgridviewprototypejs
Stefan
Stefan

Reputation: 29017

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

Upvotes: 1

Views: 381

Answers (3)

Jim Davis
Jim Davis

Reputation: 1230

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.

Upvotes: 1

Zoidberg
Zoidberg

Reputation: 10323

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

Drag & Drop: Examples

Especially this example

Drag & Drop: Using Interaction Groups

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

Resize Utility: Examples

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

ImageCropper Control: Real Time Crop Feedback

Upvotes: 2

raptors
raptors

Reputation: 332

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.

Upvotes: 1

Related Questions