The Setup:
I have a page written in JS that has 3 main divs: albums, photos and an image container. Each photo is draggable and the container is droppable (practically the dropped photo is also draggable to allow image swapping and removal). I have used the jquery-ui library for the drag and drop.
The Requirement:
Now, i would like to add 2 more pages and make those 3 pages together a wizard where the user can move back and forth with next and back buttons.
- each page displays the container of the photos (of course all data previously entered to it must be displayed)
- Next and Back buttons navigate movement from page to page and save all data.
- dragged photo can still be dragged across the divs
- should be compatible with all main browsers
- easy to implement 😉
The question:
What is the best solution for the case?
i thought of a few options:
- Use Forms and use the submit button to navigate. cons: saving state data can be tricky, as image container need to save image manipulations, such as rotations and crop, etc..
- Use iFrame as a wrapper for the photos and albums section and replace content of the frame for each page when user navigates. cons: frames are not SEO friendly (or am i mistaken?), images might be difficult to drag between the iframe and the image container.
- Replace the photo and album divs by using ajax and loading different divs instead.
I’m sure there are many other pros and cons and probably other ways to do it. As i never implemented a wizard before i would like to know what is the best way to write one.
thanks!
An alternative option, if each page merely provides more/new tools, is to simply swap out the tool “palettes” when your user “pages” back and forth. Then the tricky part (saving the state of the images) is not so tricky.
That being said, if you have clear design rules for why you need paging, then the above is probably bad advice, so take it or leave it.
HTH.