DEV Community

Cover image for react-dnd: Dragging Over An Element Without Triggering Hover State
Daniel Bellmas
Daniel Bellmas

Posted on • Updated on

react-dnd: Dragging Over An Element Without Triggering Hover State

This is an answer to a react-dnd v17 bug.

It's still a bug even though it's marked as closed in Github.

I tried the suggestions display in the issue thread, but The only thing that helped me is this:

Instead of using monitor.isDragging() to set the isDragging state use !!monitor.getItem(), like so:

const [{ opacity, isDragging }, drag] = useDrag({
    type: itemType,
    item: () => originalItem,
    canDrag,
    collect: (monitor: DragSourceMonitor) => ({
      opacity: monitor.isDragging() ? 0 : 1,
      isDragging: !!monitor.getItem()
    })
  });
Enter fullscreen mode Exit fullscreen mode

That way the isDragging state will be false whenever no dragging is occurring and true when an item is dragged.

and the hover styles will be applied only when isDragging is false:

 <Box
      ref={ref}
      sx={{
        opacity,
        ...(!isDragging && {
            '&:hover': {
              borderRadius: '4px',
              border: `1px solid blue`
            }
          })
      }}
      data-handler-id={handlerId}
    >
....
</Box>
Enter fullscreen mode Exit fullscreen mode

Click here for the StackOverflow answer

Top comments (0)