Drag and drop on firefox is glitchy.

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: https://youtu.be/q1h9SO59GTU

On chrome everything works the way I would expect. here is a video: https://youtu.be/Aijcz_HJOyc

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/>
  </div>
);

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

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.

[pavveu]

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

  <DraggedStuff>
    <ImageWrapper src={src} alt={desc} />
  </DraggedStuff>
));

.DraggedStuff  {
.....style...
position: relative;
&:after {
position: absolute;
content: '';
top:0;
bottom: 0;
right:0;
left:0;
}
}

[zerazeru]

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.