Sortable
Sortable copied to clipboard
Works intermittently on Firefox
Firefox: 57.0.4 sortablejs: 1.7.0
Issue: Using Firefox, dragging of any kind will intermittently stop working between reloads.
To replicate:
- Using updated Firefox, visit the Sortable demo page and try to sort any list on page.
- If it works as expected, reload
- 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
@RubaXa can you confirm if this will be fixed or not? We really love this library, but we cannot alienate Firefox users.
same issue
same
same here
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
Same issue here, in fact not working at all in firefox, Works in Chrome, IE11 and Edge. Using VueDraggable.
Same issue. Does not Drag and Drop with Firefox. Anyone have a fix?
I have tried to reproduce this issue on FF 58.0.2
and it's working fine. Could it have been a Firefox bug?
I am having issues on Firefox 59.0b12
(dev edition)
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
})
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.
It seems like this has been resolved in Firefox 61.
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
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
}
};
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.