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

[zmszaman]

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.

[mikesherov]

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.

[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

[zmszaman]

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

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

[mikesherov]

zmszaman, great! Thanks for the detective work!

[Zbigniew Motyka]

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

Changeset: bd126a9c1cfcbc9d0fd370af25cfa0eab294fc4e

[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