Vue.Draggable not working on Safari after first drag

[James-Z-Tang]

On Safari tried the demo https://github.com/David-Desmaisons/draggable-example and found that the first dnd works but followings no. However if you click anywhere on the page you can dnd again for once.

[PolarizedIons]

^
The second drag causes a selection instead

[anlaital]

Is there a known workaround for this issue?

[EttoreRaimondi]

Does anyone have a workaround for this? We need this to work on safari the first time you drag as explained first comment. HELP

[David-Desmaisons]

@EttoreRaimondi please check on Sortable.js repo. @owen-m1 do you have a clue on this one?

[owen-m1]

@David-Desmaisons I was told that Safari 13 has a bug in it's drag and drop API that is causing this. For now you will need to do forceFallback: true in the options.

[Braunson]

@owen-m1 How do I add this as an option to Vue.Draggable, seems regardless of what the docs say, it never get's applied.

Edit: I found the issue, a package that uses Vue.Draggable or rather SortableJS pointed me here but doesn't accept the forceFallback parameter directly. 🤦‍♂

[PolarizedIons]

<draggable :forceFallback="true" ... worked for me, @Braunson

[reppair]

worked for me as well, thanks!

[lucianokrebs]

 <draggable
   :force-fallback="true"
    ...
 >
    ....
</draggable>

☝️ It completely fixes the issue on Safari for me. Using 2.24.3.

[szotyi41]

This is working when started dragging but all of other events for another elements (dragenter, dragover, dragleave, drop) does not working for me when :force-fallback="true" applied.

[Startvy]

Just add this to your package.json and do npm install:
"overrides": { "vuedraggable": { "sortablejs": "1.14.0" } }
It will override sortablejs dependency version for vuedraggable. Fixed the problem for me!