Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#9310 closed bug (duplicate)

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.

Change History (8)

comment:1 Changed 6 years ago by tj.vantoll

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!

comment:2 Changed 6 years ago by jonez

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!

comment:3 Changed 6 years ago by Scott González

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

comment:4 Changed 6 years ago by jonez

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.

comment:5 in reply to:  3 Changed 6 years ago by jonez

Replying to 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' );
	});
Last edited 6 years ago by jonez (previous) (diff)

comment:6 Changed 6 years ago by Scott González

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.

comment:7 in reply to:  6 Changed 6 years ago by jonez

Replying to 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.

comment:8 Changed 6 years ago by Scott González

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

Note: See TracTickets for help on using tickets.