Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#8165 closed bug (fixed)

Draggable: Snapping large rectangles to small rectangles doesn't snap properly

Reported by: zmszaman Owned by:
Priority: minor Milestone: 1.10.3
Component: ui.draggable Version: 1.8.18
Keywords: haspatch Cc:
Blocked by: Blocking:

Description

I notice that snap functionality works only on the corners of draggable items. When we have 2 draggable items on the page (one of them is much bigger) and we drag bigger item in direction of smaller item it doesn't snap. Smaller item works as expected. Here is link to test case: http://jsbin.com/ococaz - green rectangle snap to red rectangle but red rectangle doesn't snap to green rectangle.

Change History (9)

comment:1 Changed 5 years ago by Scott González

Milestone: 1.9.02.0.0

comment:2 Changed 5 years ago by mikesherov

Status: newopen
Summary: Problem with snap option when dragging big rectDraggable: Snapping doesn't take top/left into account properly

Confirmed, but the problem is not as described. If you click and then drag the red rectangle downwards (even though it's constrained along the x axis) by the number of pixels that is the "top" css value of the green rectangle, then snapping works. It's as if the snap calculations don't take top/left css into account:

http://jsbin.com/ococaz/ http://jsbin.com/ococaz/2/edit

Notice the difference between the two jsbin's.

comment:3 Changed 5 years ago by zmszaman

Sorry, but I think that you are wrong. Problem is that snap calculations are doing only from corners (omitting edge). If you drag red rectangle and one of it's corners is near green rectangle then it snap to it, but if every corners (of red rectangle) are more distant that snapTolerance then it doesn't snap.

Here is example: http://jsbin.com/ococaz/5/edit

If you drag red rectangle then light red rectangles must "touch" green rectangle to snap red rectangle to green rectangle. If you drag green rectangle then light green rectangles must "touch" red rectangle to snap green rectangle to red rectangle.

In order to snap red and green rectangle - you need to drag them to eachother. It doesn't matter if they will touch with edges or corners. In the link below you can find the areas that shoud react the snapping:

http://jsbin.com/ococaz/6/edit

comment:4 Changed 5 years ago by zmszaman

I send pull request on GitHub with patch for this issue.

https://github.com/jquery/jquery-ui/pull/796

comment:5 Changed 5 years ago by mikesherov

Keywords: haspatch added
Summary: Draggable: Snapping doesn't take top/left into account properlyDraggable: Snapping large rectangles to small rectangles doesn't snap properly

zmszaman, great! Thanks for the detective work!

comment:6 Changed 5 years ago by Zbigniew Motyka

Resolution: fixed
Status: openclosed

Draggable: modified snapping algorithm to use edges and corners. Fixed #8165 - Draggable: Snapping doesn't take top/left into account properly

Changeset: bd126a9c1cfcbc9d0fd370af25cfa0eab294fc4e

comment:7 Changed 5 years ago by mikesherov

Milestone: 2.0.01.11.0

comment:8 Changed 5 years ago by Zbigniew Motyka

Draggable: modified snapping algorithm to use edges and corners. Fixed #8165 - Draggable: Snapping doesn't take top/left into account properly(cherry picked from commit bd126a9c1cfcbc9d0fd370af25cfa0eab294fc4e)

Changeset: f74a9080562b9cedcae7030f3e4681b3ee0bfb14

comment:9 Changed 5 years ago by Scott González

Milestone: 1.11.01.10.3
Note: See TracTickets for help on using tickets.