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

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

 

이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 

별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 

 

하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 

원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. 

 

react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ

하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 

 

따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 

역시나 커서는 캡쳐가 안되네요 ㅠ

해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를 변경하는 스타일 태그를 삽입했다가 제거하는 방식입니다. 

 

코드는 아래와 같습니다. 

  {isDragging ? <style>{`*{cursor: grabbing !important}`}</style>: null}

 

아래는 이전 고스트 이미지를 이용했을 때의 해결 방법입니다. 

 

https://swimmingindev.tistory.com/200

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