Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

Flickering of last item if items have different widths

Open vanBrakel opened this issue 5 years ago • 7 comments

Problem:

When using a grid that contains items of different widths, a flickering issue occurs when dragging the last element of the last row. Dragging any other element seems to work fine. This issue appears both on Chrome (78.0.3904.97), Firefox (69.0.1) and IE Edge (44.18362.449.0). Funnily enough, it doesn't appear on IE (11.476.18362.0).

JSFiddle demonstrating the problem: https://jsfiddle.net/qu4ntyl/y63259qv/

example

vanBrakel avatar Nov 17 '19 10:11 vanBrakel

I knew this case was possible, but I didn't solve it because I didn't think anyone would find it :smile:

owen-m1 avatar Feb 16 '20 23:02 owen-m1

Having similar problem to this. Any solution?

In my case I guess this happen becase of the placeholder underneath. Check this out

I this case, each "SEED X" item is a sortablejs object. So there will be only one item inside and it'll be the last always.

dzero1 avatar Apr 22 '21 05:04 dzero1

Same issue. In my case it happens randomly, no regard to the item level.

Demo https://user-images.githubusercontent.com/18191493/124004508-14b2e900-d9a6-11eb-94e2-42a13ead1506.mp4

Initialization image

Any solution?

EtienneTLM avatar Jun 30 '21 17:06 EtienneTLM

@owen-m1 Any update?

sabuz avatar Feb 21 '22 18:02 sabuz

@RubaXa @owen-m1 I am still seeing this issue. Happens when elements have different heights as well. I have forceFallback: true as well. Would really love to get a solution for this

ayushm-agrawal avatar Sep 07 '22 20:09 ayushm-agrawal

I got a solution. You'll have to add a hidden item at the end, and then disable drop after and sort for that hidden item.

sabuz avatar Sep 08 '22 05:09 sabuz

@sabuz Do you mind creating a quick fiddle with this solution?

ayushm-agrawal avatar Sep 08 '22 05:09 ayushm-agrawal

Hey folks, it seems to occur because of the threshold of the swap zone. I think this issue must be solved internally, but while there's no fix, try to set the swapThreshold option to something less than 1. By decreasing this option's value (as explained here) little by little, you will see the flicker/jumps happening less and less, until the chances that a user triggers the issue becomes acceptable. For me, setting swapThreshold: 0.5 completely "fixes" the issue.

My two cents guess is that on some configurations, two swap zones overlap each other, triggering multiple swaps at the same time in an infinite loop.

ajacquierbret avatar Jun 29 '23 10:06 ajacquierbret

Sorry this took so long to fix. It should be fixed in 1.15.1.

owen-m1 avatar Nov 30 '23 22:11 owen-m1