Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

When "forceFallback" is set to true, the element doesn't really follow the cursor.

Open plamendobrev opened this issue 5 years ago • 13 comments

So, when the "forceFallback" option is turned off, the browser uses the standard Drag 'n Drop API which follows the cursor but I honestly find it quite limiting. I need "forceFallback" turned on so I can scale the element with the CSS transform property when dragged. The problem is that it doesn't really follow the cursor and can lead to confusion. Is there any fix or workaround about it?

plamendobrev avatar Oct 31 '20 19:10 plamendobrev

I have the same issue for this I have to hide the fallback with css.

woutergovaert avatar Dec 02 '20 09:12 woutergovaert

+1 Having the same issue

Marchiuzzz avatar May 12 '21 09:05 Marchiuzzz

+1 I have the same issue. when I scroll down more, the offset between the ghost image and the cursor is larger. so the forceFallback is not usable.

kt-at-cbx avatar May 20 '21 02:05 kt-at-cbx

<sortablejs 1.11.0 (not work)> after <sortablejs 1.10.0 (work)> before

I had some issue with using forceFallback, and I solved it by version down.

react-sortablejs: "6.0.0"
sortablejs: "1.10.0"

When I used sortablejs over 1.10.0 version, the forceFallback didn`t work properly.

wantyouring avatar Jun 15 '21 13:06 wantyouring

I have the same problem, I still want to use forceFallback, is there any solution?

akakaze avatar Jul 19 '21 17:07 akakaze

is there any solution?

kamilic avatar Feb 28 '22 03:02 kamilic

I dig into codebase and found a solution. https://github.com/SortableJS/Sortable/blob/master/src/Sortable.js#L798 My fallback element inherited style is transform: scale(0.5);, then I change variable scaleX and scaleY to 0.5. It works. but I think it's a very dirty workaround.

I am not sure whether it is a good solution to fix it. I add options fallbackOverridedScaleX / fallbackOverridedScaleY to solve this. Here is my patch. https://github.com/SortableJS/Sortable/compare/master...kamilic:patch-1

If use vuedraggable, you can pass this two props directly to component.

<draggable
        :fallback-override-scale-x="0.5"
        :fallback-override-scale-y="0.5"
/>

kamilic avatar Feb 28 '22 07:02 kamilic

This issue is still not fixed.

mitirius avatar Sep 11 '23 12:09 mitirius

This issue is still not fixed.

nomadZyt avatar Jan 23 '24 11:01 nomadZyt

Same here with "sortablejs": "^1.15.2". This issue is still not fixed.

quocthanh2694 avatar Apr 16 '24 13:04 quocthanh2694