I'm trying to create an interface where the user can lay out a page by resizing the elements on it, using jQuery UI Resizable. At the moment this is laid out with a string of item numbers and size attributes. Example of layout text:
[(b) 80431R 80431P 80431B 80431BK 80431SB 80431PR] 80472(1p5) 80616(1p5) 80617(1p5) 80618(1p5) 80475(1p5) 80477(1p5) 80474(1p5)
/* This is the layout code for Page35 linked to below. */
I would like to make it simpler so that the user can just drag the elements to resize them.
The layout of the page they are creating is based on several specific sizes that the page elements are allowed to have. The "snap to grid" option for jQuery Resizable is not enough, since I need to allow only a few specific sizes, and this cannot be accomplished with a simple grid. In percentages, these are the allowed sizes (width): 33%, 50%, 66%, and 100%. (I'm fine with using pixel values in the interface). There are also 3 different heights that are allowed, the default is auto, then there are two pixel heights you can apply if need be.
If you go to the following two pages, you can see the front-end for what I am working on:
http://www.funservices.ca/catalog/2010/Page34
http://www.funservices.ca/catalog/2010/Page35
Is there any way to achieve this with jQuery Resizable? I thought about just firing an event after each resize to snap the element to the closest permitted size, but that seems less than ideal as it doesn't give the user enough visual feedback. Any suggestions would be much appreciated!