TIL - Drag and Drop 만들기

Drag and Drop List 가 필요해서 삽질했던 과정

1. HTML Drag and Drop API를 이용한 작업

• MDN 공식 문서
  https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
• 참고 사이트
  https://velog.io/@yunsungyang-omc/React-Drag-Drop-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0
• 결론
  공식 API로 웹에서는 잘 작동하는데 모바일에서는 작동하지 않았다. 모바일 전용 Drag and Drop 함수를만들어줘야해서 패스

2. DnD 라이브러리

• 공식 git gub
  https://github.com/atlassian/react-beautiful-dnd

• 참고사이트
  https://velog.io/@seohee0112/React-beautiful-dnd

• 결론
  웹에서 잘 작동하고 모바일에서도 작동한다. 그러나 모바일에서 0.2초정도 누르고 있어야만 드래그가 활성화 된다.
  이 문제를 개선할 pr이 올라와 있지만 현재 라이브러리 개발자가 관리를 중지한 상태. 사용자 경험이 안좋을 것 같아 패스
  ---10.12 ---
  0.2초 눌러야 이동되는것이 맞았다.. 다시 dnd로 변경완료

3. 애니메이션 라이브러리

• 공식문서
  https://www.framer.com/docs/reorder/

• 기타 사항
  모듈 설치 후 아래 에러를 만났다.
  찾아보니 react script 4.0.3 버전이 문제다. 5.0.1으로 올리면 문제 없다한다.
  하지만 web3 페이지에서 사용되는 모듈들이 5.0.1 호환이 잘안되는 문제 때문에 4.0.3을 써야한다.
  버전을 올리지 않고 다른 방법으로 문제 해결했다.
  문제 해결 참고사이트 보면 나온다.

• 문제

[BUG] Can't import the named export 'Children' from non EcmaScript module (only default export is available) #1525

• 문제 해결 참고 사이트
  https://github.com/framer/motion/issues/1525 (import 문제 해결)
  https://www.framer.com/docs/use-drag-controls/ (drag block 하기)
  https://blog.maximeheckel.com/posts/framer-motion-layout-animations/ (framer-motion 사용법 잘 정리된 사이트)

• 결론
  웹, 모바일 모두 작동하고 드래그 반응속도도 양호하다.
  DnD 전용 라이브러리보다 애니메이션 라이브러리를 써서 만드는게 추후 다른 애니메이션이나 기능 만들때도 더 좋을 것이라고 판단. react script 이슈가 있었지만 해결했으니 OK. 사용 결정!
  ---10.12 문제발생---
  모바일에서 아이템이 여러개일때 스크롤이 작동하지 않고 리스트가 이동하게 되어서 DnD라이브러리로 변경함