Drag and drop on firefox is glitchy.

[arconus]

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.

[carloswbarros]

I'm also having some problems with Firefox, not exactly like yours, but every time I drag outside of the container it will draw me the item outside and stay there like a ghost or a placeholder. But I think this bugs only happen in the new Firefox, I'm using Firefox Nightly. I tried an old version of Firefox and Chrome and it's working fine.

Edit: The funny thing is that the demo works fine, but the example in the README.md (with the item having a border 1px solid black and a padding of 20px) doesn't.

[mc-funk]

I can confirm that the same issue appears consistently in Firefox, but not Chrome, using both 0.6.7 and reverting to 0.6.6. Our items drag vertically rather than horizontally, but the behavior (moving a small amount in the drag direction, then stopping, and sometimes following the cursor afterwards until it releases on click) is the same described/demonstrated here.

Info for Firefox (glitching): http://whatismybrowser.com/w/8WT8EDR Info for Chrome (working): http://whatismybrowser.com/w/7RTXPGK

[lemurry]

Have the same issue in Firefox with an image as reordable item. Adding a pseudo-element on top of my sortable element did a trick for me, but it's not a really great solution ofc. But it works anyway.

[mc-funk]

@lemurry can you clarify what you meant about adding a pseudo-element? A workaround for this issue would be very helpful. Thank you!

[robhadfield]

I'm using handles in FF and I don't get any sortable behaviour, doesn't pick up/drag at all.

[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;
}
}

[robhadfield]

Thanks @pavveu - I solved mine with CSS too. I was using an inline-block element as the handle but making this a block and adding the &:after element means I can now grab. Woot!

Cheers all.

[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.

[dagadbm]

https://github.com/clauderic/react-sortable-hoc/issues/253

this issue also helps with this

[Girijashankar-CS]

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.

Worked for me, but in my case the child elements has the pointer events and which cannot remove... Any alternative Solution ?

[jamesalester]

Finesse's comment from #253 helped me. Preventing the event default onSortStart of the SortableList did the trick. He does mention that it won't work when

the pressDelay or the distance option is set.

But if you're not using these then you might be able to get away with it.

[soorajkarikkan]

Is there any other work around to get the drag n drop work smoothly in Firefox? I tried the &:after { } styles as suggested by @pavveu and also the pointer-events: none styles by @zerazeru , both didn't work for me. From @jamesalester 's comment above, preventing the event default onSortStart did work, but I can't use it as I'm using distance={1} as a work around to allow the click events work. Does anyone has any other solution to fix this issue in Firefox? Thanks

[jacksontong]

&:after works for me

[AkimSolovyov]

Same here. Thanks for help

[albohlabs]

@soorajkarikkan Enabling the pointer-events on hover works for me.

  > * {
    pointer-events: none;
  }
  &:hover .clickable {
    pointer-events: auto;
  }

[ghargrove]

I encountered this issue as well. Setting my drag handle img to display: inline-block fixed it.