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

Daniel Bellmas @danielbellmas

About: Full-Stack Developer

Joined:
Sep 20, 2021

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

Publish Date: Sep 23 '22
8 0

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

Comments 0 total

    Add comment