Works intermittently on Firefox

[kieraneglin]

Firefox: 57.0.4
sortablejs: 1.7.0

---

Issue: Using Firefox, dragging of any kind will intermittently stop working between reloads.

To replicate:

1. Using updated Firefox, visit the Sortable demo page and try to sort any list on page.
2. If it works as expected, reload
3. Repeat until you cannot sort the lists (usually takes less than 5 reloads)

Other: So far, it works flawlessly on Chrome.

Edit: Video of this behavior: https://gfycat.com/LightheartedTotalKodiakbear

[kieraneglin]

@RubaXa can you confirm if this will be fixed or not? We really love this library, but we cannot alienate Firefox users.

[mocker12345]

same issue

[melrefaie]

same

[pittaya]

same here

[natecox]

I'm experiencing the same issue; however, reloading the page does not fix it for me. On subsequent reloads the dragging functionality will be broken, until I close the tab and open the page up in a new one.

Firefox 59.0b5 (64-bit)
macOS 10.13.2

[nasirghaznavi]

Same issue here, in fact not working at all in firefox, Works in Chrome, IE11 and Edge. Using VueDraggable.

[bidwellm]

Same issue. Does not Drag and Drop with Firefox. Anyone have a fix?

[patrickdavey]

I have tried to reproduce this issue on FF 58.0.2 and it's working fine. Could it have been a Firefox bug?

[thomas07vt]

I am having issues on Firefox 59.0b12 (dev edition)

[adamJLev]

Same issue for me on Firefox 58 and also 59 beta version. Thankfully the fallback method does work so this is my workraound for now

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

new Sortable(el, {
  forceFallback: isFirefox
})

[wunc]

Not sure if this is related, but for me it works reliably on FF 58.0.2, until I enter responsive-design mode (Tools > Web Developer > Responsive Design Mode), and then it consistently stops working.

If I enable touch simulation in responsive design mode, or exit the mode, then it starts working again.

[lijunle]

It seems like this has been resolved in Firefox 61.

[ernsheong]

Mmm I don't see it as resolved with FF 65 and latest Sortable 1.8.3.

Any tips on workarounds with Sortable? forceFallback: true does not have any effect for me

[jordidiaz]

Hi,
I was experiencing the same issue. I found that on SO: https://stackoverflow.com/a/19055350/1411105. That solved the issue.

Code example:

this.sortablejsOptions = {
   onEnd: (event: any) => {
      this.onDragEnd(event);
   },
   setData: (dataTransfer: DataTransfer, draggedElement: HTMLElement) => {
      dataTransfer.setData('foo', 'bar'); // required by Firefox in order to DnD work: https://stackoverflow.com/a/19055350/1411105
      }
    };

[dougc84]

Not sure if anyone is still having this issue, but I've found a solution that works for me.

Before, this worked fine in Safari and Chrome, but was very intermittent on FF 104.

• forceFallback didn't work at all. As a matter of fact, it completely broke several pages in dev because callbacks didn't execute properly, orphaning records on a complex multi-Sortable page.
• dataTransfer.setData didn't work at all. It legitimately made zero difference.

In our personal case, we use FontAwesome 4 icons (we have too large of a code base to migrate to 5) for our sort handles. Something like the following markup:

<i class="fa fa-sort" rel="sort_handle"></i>

and with sortable (CoffeeScript - again, old, very large app, too much to migrate away from):

new Sortable target,
  # other stuff
  handle: '[role="sort_handle"]'
  # more other stuff

Our markup for our FA icons includes some padding on the right side since most of our icons are injected inline with text to create the proper padding. If I clicked on the FA icon itself, the chosenClass gets assigned, but nothing is draggable - almost like something is sitting on top allowing the click event to pass through, but not drag events. However, if I click on those few pixels of padding, sorting works 100% as expected.

So it seems the culprit is FF and how it manages the stacking context of ::before pseudo elements, almost like it gives it its own stacking context atop of the current markup. The click event passes through but it doesn't seem like drag events do. I added this bit of CSS:

@-moz-document url-prefix() {
  .fa[role=sort_handle]::before {
     pointer-events: none;
  }
}

• @-moz-document url-prefix() targets only FF browsers. See https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
• The ::before of the FA icon interferes with drag events, so we make sure the pointer cannot interact with it.
• Setting pointer-events: none on ::before means the <i> can still be clicked and interacted with, but when the icon is rendered (which occurs in the ::before pseudo element), the icon itself - what has its own stacking context - can no longer be interacted with.

The sort handle works reliably now.