Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

Folding animation inaccurate when dragging multiple items while container scrollTop is non-zero

Open guanxun14 opened this issue 4 years ago • 2 comments

Describe the bug

Ghost elements fly towards the top of the page during the folding animation when a drag is started. This happens when dragging multiple items while container scrollTop is non-zero (that is, the container has been scroll downwards).

To Reproduce Steps to reproduce the behavior:

  1. Go to this JS Bin.
  2. Scroll down approximately halfway.
  3. Select >1 items.
  4. Initiate a drag on the selected items.
  5. See that the other ghost elements (selected elements part of the multiDrag, but not the dragged element itself) "shoots" upwards instead of folding directly towards the dragged element.

Expected behavior

Ghost elements part of the multiDrag should collapse directly towards the ghost element — same behaviour as when page is not scrolled (scrollTop = 0).

Information

Sortable.js 1.10.2 (as included in JS Bin)

Additional context Appears to not be an issue when max-height and overflow-y: scroll is set on the parent Sortable element. However, in my local use case, issue is occurring on two such side-by-side containers, but only on the one on the left.

Reproduction JS Bin: https://jsbin.com/kocerucaco/edit?html,css,js,output

guanxun14 avatar May 28 '20 09:05 guanxun14