I need a div container grid (300px x 300px), which is 3x3 divs long and high.
The first container (#1) must be 2 grids long and 2 grids high (200px x 200px). All others are 1x1 (100px x 100px) long and high.
Now I must be able to resize (jQuery resize) div #1 in this container by 100px x 100px snaps.
On resizing + stop resizing there must be a correct preview (correct order) of the objects.
Allowed are max 9 grid containers resp. one container width size of 3x3 grids. If container #1 resized to 3x3, all other divs must be deleted. If container #1 resized to 1x1, there must be 8 more div containers in the grid.
On top I must be able to drag (jQuery draggable) the container #1 inside the grid with 100px x 100px steps. On dragging + stop dragging there muste be a correct preview (correct order) of the objects in the grid. If you drag container #1 to position #2, the container #2 must be slip to position #1, container #3 to position #4... There is now white space allowed in the whole grid.