드래그앤드랍3 [DragNDrop] 드래깅 도중 hover 가상 선택자 문제 안녕하세요, 개발자 Sean입니다. 오늘은 드래그 앤 드롭 작업도중 이상한 문제가 발생해 원인과 해결방법에 대해 기록하려고 합니다. 드래그 앤 드롭 컴포넌트에 :hover 가상 선택자로 스타일 변경 코드를 적용하고 드래그 앤 드롭으로 순서를 변경하는 컴포넌트를 만들었습니다. 그런데 아래 사진과 같이 순서가 바뀌고 기존에 선택했던 칸에 새 컴포넌트가 들어가면 :hover 가상 선택자가 발동하는 현상이 나타났습니다. 문득 마우스의 포지션 변화가 없어 이런 문제가 발생하는지 궁금해 아래와 같이 현재 커서의 위치를 로그로 찍어보았습니다. useEffect(() => { const handleMouseMove = (event) => { setMousePos({ x: event.clientX, y: event.cl.. 2023. 3. 23. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ 하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를.. 2023. 3. 21. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 np.. 2023. 3. 16. 이전 1 다음
