Jquery-ui's draggable is not behaving correctly when document's auto-fit option is enabled

I’m trying to implement drag and drop based on some previous discussion which is using jquery-ui such as this one.

I’m able to reproduce it just fine, except when I enable the document’s auto-fit option, the draggable item is then shifts from the cursor when being dragged. Seeing this discussion on stackoverflow, I believe this is caused by jquery-ui’s bug. I’ve tried to implement some of the suggestions there but found no luck.

I’m wondering if there’s a way around for this, seeing that jquery-ui is being suggested on several discussions about drag-and-drop here. Your help is appreciated.

Note: I’m using Saola Animate v3.0.1 on Windows 11, opened in Chrome, Edge, and Firefox, with jquery v1.12.4 and jquery-ui v1.12.1.


You can use two following libraries to make jQuery draggable work on mobile device and when auto-fit is enable:

Sample project:
dragdrop_mobile_autofit.saolapack (6.0 KB)


I need to develop the code to my needs, and I just finished testing it. It fixes the problem just fine. Thank you very much!