Question

Please read this question together with this jsFiddle.

I have a jQuery Sortable list where I want to contain the items within the parent container while dragging – no problem – I use the containment:'parent' option.

However, when the height of the second item is greater than the height of the first item, I am unable to drag the second item to the first position.

I have tried unsuccessfully to use the additional option tolerance:'pointer' (my preference) nor does it work with the default tolerance:'intersect'.

I understand from the docs that this is the expected behaviour for tolerance and works absolutely fine when the items have equal height.

Is there a workaround for my scenario where the second item has greater height than the first item?

Answer 1

Adding the option cursorAt: { top:1 } resolves the issue. Link to the docs.

Unfortunately, I have subsequently discovered there is the same problem when trying to drag a tall item to the bottom of the list.

In the end my solution was to hack the _intersectsWithPointer function within jquery.ui.sortable.js.

I have replaced:

var c = this.options.axis === "x" || a.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, b.top, b.height),

with:

var c = this.options.axis === "x" || a.ui.isOverAxis(this.positionAbs.top + (this._getDragVerticalDirection() == "up" ? 0 : this.helperProportions.height), b.top, b.height),

Now dragging any item of any height up- or downwards works absolutely fine.