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.29k stars 3.69k forks source link

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

Open plamendobrev opened 3 years ago

plamendobrev commented 3 years ago

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?

woutergovaert commented 3 years ago

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

Marchiuzzz commented 3 years ago

+1 Having the same issue

kt-at-cbx commented 3 years ago

+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.

wantyouring commented 3 years ago

<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.

akakaze commented 3 years ago

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

kamilic commented 2 years ago

is there any solution?

kamilic commented 2 years ago

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"
/>
mitirius commented 11 months ago

This issue is still not fixed.

nomadZyt commented 7 months ago

This issue is still not fixed.

quocthanh2694 commented 4 months ago

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

fanchenio commented 1 month ago

This issue is still not fixed.