Skip to main content

Search and Top Navigation

#9310 closed bug (duplicate)

Opened May 16, 2013 05:50PM UTC

Closed May 19, 2013 04:03AM UTC

Last modified May 23, 2013 02:20PM UTC

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

Reported by: jonez Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

Currently the grid array passed into a Draggable object uses the elements starting position as [0,0] for the grid. If an element starts at 103x25 with a grid of [20x20] the first increment moving left would be 123x25, ideally it would move to 120x25 or an option should be present to change it's behaviour.

http://bugs.jqueryui.com/ticket/4454

Same issue, I can't reply to that thread but I believe the reply from scott.gonzalez missed the author's intent. The 'dragstart' event triggers too late to move an element off the grid into the grid, and while the 'drag' event can pragmatically control the position of the element doing so overrides the built in 'snap' logic. So yes, technically we can control the grid but in doing so we lose other functionality.

http://forum.jquery.com/topic/jquery%E2%80%99s-draggable-grid-conceptually-flawed

The response from fordlover49 seems to suggest you can modify ui.originalPosition in 'dragstart' but this does not work.

Attachments (0)
Change History (8)

Changed May 19, 2013 04:03AM UTC by tj.vantoll comment:1

resolution: → duplicate
status: newclosed

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!

Changed May 23, 2013 01:36PM UTC by jonez comment:2

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!

Changed May 23, 2013 01:40PM UTC by scottgonzalez comment:3

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

Changed May 23, 2013 01:43PM UTC by jonez comment:4

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.

Changed May 23, 2013 01:49PM UTC by jonez comment:5

_comment0: 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. \ \ {{{ \ \ 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' ); \ }); \ }}} \ 1369317000874676

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' );
	});

Changed May 23, 2013 01:53PM UTC by scottgonzalez comment:6

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.

Changed May 23, 2013 02:01PM UTC by jonez comment:7

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.

Changed May 23, 2013 02:20PM UTC by scottgonzalez comment:8

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