search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.78k stars 3.7k forks source link

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

Open guanxun14 opened 4 years ago

guanxun14 commented 4 years ago

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

Matt1s commented 2 months ago

@guanxun14 Did you manage to resolve this issue? As I currently have this problem.

guanxun14 commented 2 months ago

Sorry, I really can’t remember what I ended up doing about this back then 🙃