Updated fiddle: http://jsfiddle.net/W7UxN/1/
"I'm having a hard time visualizing your use case of moving something from off the grid into it."
Imagine you have a container that has 5 elements inside it. These elements can be arbitrarily placed by the user at any increment (25,25 or 21,28 etc). Draggable is initialized with grid=false, and the user moves the pieces around. Now the user decides that element A and element B should have their top edges aligned with one another. We give the user an option to show/hide a grid system to assist in making alignments. The user turns the grid on, we loop through all 5 elements and set grid=16,16. When grid inits, every element has their own grid with the center 0,0 at their current position. Even though every element has the same grid increment, none of them can be aligned with one another because they are all on their own grids, vs. one common grid (parent).
What we'd like to have happen:
1. We start with grid=false, element at 21,27.
2. We set grid=20,20 on all elements
3. When element is moved, the first move pushes the element to 20,20. Now the element is in the grid.
4. Any subsequent move uses the grid system, so 20,40 or 40,40 etc.
If every element started out on a grid increment this wouldn't be an issue. But, myself and the other users in the previous ticket are looking to only apply a grid when necessary. This creates a situation where an element can init not on a grid increment, have a grid applied, then need to be put into a valid grid increment so it can be aligned with other elements within a parent container.
I hope that does a better job of describing the problem.
1. Option to specify a parent as the base for the grid
2. Beforestart event so we can push out of grid elements into the grid if needed