Draggable option 'grid' needs a way to offset from parent

Duplicate of #4454.Hi jonez,

Thanks for taking the time to contribute to the jQuery UI project. You should be able to comment on closed issues so I'm going to close this as a duplicate of #4454 to keep this consolidated. If you have issues commenting on that issue let us know.

Also, could you please provide a test case that shows this issue? I'm having a hard time visualizing your use case of moving something from off the grid into it. You can use this as a starting point: http://jsfiddle.net/tj_vantoll/W7UxN/.

Thanks!

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.

Possible solutions:

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

Thanks!

FWIW, the grid option is going away with the interactions rewrite. However, there is a beforeStart callback in the new API. See http://wiki.jqueryui.com/w/page/12137878/Draggable

Actually this is a better fiddle: http://jsfiddle.net/W7UxN/2/

Two elements, both in the same container with the same grid 20,20. Neither element can have their edges aligned because they init at off-grid increments.

Replying to [comment:3 scott.gonzalez]:

FWIW, the grid option is going away with the interactions rewrite. However, there is a beforeStart callback in the new API. See http://wiki.jqueryui.com/w/page/12137878/Draggable

When you say new API, what do you mean? I just tried the following and none fire (1.10.3).

	container.draggable({
		containment: 'parent',
		snap: true,
		snapTolerance: 10,
		grid: grid,
		beforeStart: function( )  {
			console.log( 'go1' );
		}
	});

	container.bind( 'beforestart', function( ) {
		console.log( 'go2' );
	});

	container.bind( 'beforeStart', function( ) {
		console.log( 'go3' );
	});

I assume you didn't read the note at the top of the page I linked to:

Note: This plugin is being rewritten for the 2.0 release. This documentation is about the rewrite, not the existing plugin.

Replying to [comment:6 scott.gonzalez]:

I assume you didn't read the note at the top of the page I linked to: > Note: This plugin is being rewritten for the 2.0 release. This documentation is about the rewrite, not the existing plugin.

Sorry I skipped straight to the API methods. Is there any chance beforeStart could be added before 2.0? From your roadmap I'm assuming it will be a few months before 2.0 is released. If you are willing to accept patches I'd gladly provide the code.

No new APIs will be accepted prior to the rewrite. You can implement a custom grid using the drag event.