Vue.draggable: Sometimes stops working in Firefox

[mrchimp]

I'm using the latest Firefox Developer Edition (58.0b11).

Occasionally vue-draggable stops working and I am unable to drag the items. It's an inconsistent bug and there are no errors in the console. Here is a Vue template that has the issue, though I have experienced it on a few different components.

<template>
  <draggable
    element="div"
    :options="dragOptions"
    :v-model="value"
    @sort="onGridSort"
  >
    <div class="card-grid__item"
      v-for="card in value"
      :key="card.slug"
    >
      <card-thumb
        :title="card.title"
        :subtitle="card.subtitle"
      >
      </card-thumb>
    </div>
  </draggable>
</template>

The issue seems to be unique to Firefox. Chrome and Safari work fine. The strangest part is that refreshing the page doesn't fix the problem, but loading the page in a new window sometimes does.

I won't get a chance to debug it further before next year but I thought I'd raise the issue now in case anyone else was having the issue or knew of a possible reason for it.

[Denerot]

Same experience here, was driving me nuts trying to figure out how I broke it, but it just randomly starts working again after some time. No console errors or anything.

[David-Desmaisons]

This browser specific issue are linked to Sortable library, there are alreay some firefox issues there: https://github.com/RubaXa/Sortable/issues?q=firefox+is%3Aopen
Please make sure that this one also is trcaked.

[kieraneglin]

@David-Desmaisons I actually don't see any recent issues for Firefox that apply to this situation.

Furthermore, Sortable.js works as expected in my situation (so far) very consistently.

Something as simple as

<draggable v-model="users">
  <div v-for="user in users" :key="user.id">{{user.name}}</div>
</draggable>

data() {
  return {
    users: [
      {
        id: 1,
        name: 'Bill'
      },
      {
        id: 2,
        name: 'Bob'
      }
    ]
  }
}

Doesn't work reliably on FF with Vue.Draggable. However, a comparable setup works every time with Sortable.js

[David-Desmaisons]

Could define "doesn't work reliably"?
Which version of vue.draggable/sortable and sortable stand-alone are you comparing?

[kieraneglin]

Dragging will work as expected >50% of the time.

When the dragging is "broken", you cannot move elements whatsoever. I see that the ghost divs are getting added to the DOM, but they aren't visible and don't get removed when a "drag" is completed.

Its functionality seems to be random. It will work as expected for a time, then stop working where even a hard reload won't fix the issue. The only reliable fix for me is opening my page in a new window.

Keep in mind that I am not changing my code and it works in Chrome flawlessly.

---

Firefox: 57.0.4
vuedraggable: 2.16.0
sortablejs: 1.7.0

[kieraneglin]

Hmm, perhaps I spoke too soon. I witnessed my first failure with Sortable standalone. I'll open an issue on their side.

[kieraneglin]

Documented here: https://github.com/RubaXa/Sortable/issues/1267

[nasirghaznavi]

Same issue here, infact not working at all in Firefox. Working fine in Chrome, IE11 and Edge.

[mahnouel]

adding :options="{forceFallback: true}" made it work again, in my case

[ebellumat]

<draggable v-model="yAxis" :options="{ forceFallback: true }"> </draggable > Work for me.

[LMCom]

After scratching my head over this (it worked the first try, then never again despite 30 reloads), I am lucky to have found this issue. I, too, can see copies of dragged elements being added to the DOM with display:none.

I also can confirm, that forceFallback:true solves the problem.

[David-Desmaisons]

Closed as forceFallback:true workaround solves the issue