[DragNDrop] 드래그 도중 커서 변경

안녕하세요, 개발자 Sean입니다. 

 

오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 

 

드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 

 

구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 npm 레지스트리에 떠돌아다니는 라이브러리 중에 신뢰할만한 라이브러리가 있을진 잘 모르겠습니다...

 

따라서 저는 약간의 편법으로 이 문제를 해결해 보았습니다. 

솔직히 말씀드리자면 이게 정확히 어떤 구조로 해결방안이 될 수 있는지는 아직 이해하진 못했습니다 :( 

 

스샷에서 커서확인이 안되지만 드래깅 하는 동안에는 커서가 grabbing으로 변경됩니다. 

스크린샷에서는 커서가 안보이네요 :(

아래는 구현 코드입니다. 

export const Container = styled.div`

  ...

  cursor: ${props => props.isDragging ? "grabbing" : "pointer"};

  ...
`

const CompanyCard = ({data}) => {

  const [{isDragging}, drag] = useDrag(() => ({
    type: "companyCard",
    item: {data: data},
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    })
  }))

  return (
    <Container
      isDragging={isDragging}
      ref={drag}
    >
     	...
    </Container>
  )
}

react-dnd 훅을 이용해 드래그 상태값을 얻어낸 뒤 스타일에 드래그값 변화에 따라 커서가 변하게끔 설정을 하였습니다.