如何在没有触发悬停状态的元素上进行拖动

这是一个关于react-dnd v17 bug的答案。

尽管它在Github中被标记为关闭，但它仍然是一个bug。

我尝试了问题线程中显示的建议，但唯一能帮助我的是这个：

不要用monitor.isDragging() 来设置isDragging状态，而是用!!monitor.getItem() ，像这样：

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

这样一来，当没有拖动发生时，isDragging 状态将是false ，当一个项目被拖动时，true 。

而只有当isDragging 为false ，悬停样式才会被应用：

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