트리거 호버 상태 없이 요소 위로 끌기

이것은 react-dnd v17 버그에 대한 답변입니다.

Github에서 닫힌 것으로 표시되어 있지만 여전히 버그입니다.

문제 스레드에 제안 표시를 시도했지만 저에게 도움이 된 유일한 것은 다음과 같습니다.

isDragging 상태를 설정하기 위해 monitor.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>

StackOverflow 답변을 보려면 여기를 클릭하십시오.