Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drag and drop on firefox is glitchy.

See original GitHub issue

On firefox when I try to drag and drop items after dragging for a few pixels the cursor changes to crossed out circle and the drag stops. When I let go of the mouse button I am dragging the item again and clicking releases the drag and drops the item. here is a video:

On chrome everything works the way I would expect. here is a video:

Here is my setup code.

const styles = theme => ({
  grid: {
    width: 208,
    marginLeft: 'auto',
    marginRight: 'auto',
    '@media (min-width: 500px)': {
      width: 'calc(100% + 16px)',
      margin: -8,
      paddingRight: 20,
      paddingLeft: 20,
  sortableHelper: {
    zIndex: 3000,
  sortableItem: {
    margin: 8,
    width: 192,
    height: 256,
    display: 'inline-block',
  sortableContainer: {
    margin: 0,
    marginTop: -8,
    padding: 0,

const SortableItem = SortableElement(({value, classes}) =>
  <div className={classes.sortableItem}>
    <RouteTile route={value} disableClick showRouteLine/>

const SortableList = SortableContainer(({items, classes}) => {
  return (
    <ul className={classes.sortableContainer}>
      {, index) => (
        <SortableItem classes={classes} key={ + (route.climb_id ? '_' + route.climb_id : '')} index={index} value={route} />

class BoulderRouteGrid extends React.Component {
  render() {
    const classes = this.props.classes;
    return (<SortableList helperClass={classes.sortableHelper} axis={'xy'} items={this.props.routes} classes={classes} onSortEnd={({oldIndex, newIndex}) => {this.props.onRouteMoved(oldIndex, newIndex)}} />)

export default withStyles(styles)(BoulderRouteGrid);

The one thing somewhat unique is that the scrollable container is inside a material UI Dialog.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:14
  • Comments:16

github_iconTop GitHub Comments

pavveucommented, Jan 2, 2018

@mc-funk had the same problem and this worked for me -> DraggedStuff is styled div:

    <ImageWrapper src={src} alt={desc} />

.DraggedStuff  {
position: relative;
&:after {
position: absolute;
content: '';
bottom: 0;
zerazerucommented, Mar 9, 2018

I figured out that it happens when the SortableItem has position: relative and it has a child with position: absolute and the dragging is started on that child.

So setting pointer-events: none on the child solves it for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Fix Drag and Drop When It's Not Working in Firefox
Launch Firefox, click on the three lines on the upper right, and select Help. open firefox help · Next, select More troubleshooting information....
Read more >
Drag and drop from firefox to Windows desktop stopped ...
After updating to v68 (x64) earlier today, drag and drop of pictures from Firefox to Windows desktop, stopped working. What I tried so...
Read more >
Drag and drop is super slow in Firefox - Tips and Tricks
Dragging and dropping cards on the board has been super slow on both the board for a while and the list view. The...
Read more >
Can't Drag and Drop TO Firefox - Reddit
Firefox 97.0.1 64bit on Win10 21H2. Unlike all the people who post about not being able to drag things from Firefox and drop...
Read more >
Bug #1964541 “Cannot use Drag and Drop in gnome-shell 42 ...
The [Bugbug]( bot thinks this bug should belong to the 'Firefox::Toolbars and Customization' component, and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found