Drag Drop - boostcampwm-2021/WEB25-JustUs GitHub Wiki

현업에서도 애용하는 드래그/드랍 라이브러리를 사용할까 라는 유혹을 참고 성장을 위해 직접 구현해봤다.

React DnD Tips & Tricks - 채널톡

우선 태그가 드래그 되는 모습이 보이기 위해 draggable = true 속성을 줘야 한다.

draggable - HTML: Hypertext Markup Language | MDN

코드를 짜기 전 방향 잡는데 도움이 많이 된 레퍼런스이다.

https://codepen.io/fitri/pen/VbrZQm

Node.insertBefore() 와 Document.elementFromPoint() 를 처음 알게 되었는데 아주 요긴하다

• insertBefore 를 통해 기존의 노드를 움직일 수 있으며 따로 삭제하지 않아도 된다.

Node.insertBefore() - Web API | MDN

• elementFromPoint 를 통해 마우스 이벤트가 발생한 포인트에 있는 Element를 알 수 있다.

Document.elementFromPoint() - Web APIs | MDN

마지막으로 Drag와 관련된 이벤트는 정말 많았고, 거의 다 사용하게 되었다.

HTML Drag and Drop API - Web APIs | MDN

+onDrop이 처음에 동작을 안했었던 이슈 가 있었는데 아래를 보며 해결했다.

React onDrop is not firing

• 추후드래그 드랍시 바뀌는 태그들에게 애니메이션을 넣고싶다.

javascript drag and drop 구현 시도와 시행착오

• event target 에서 innerText가 잡히지 않을 때

error " Property 'innerText' does not exist on type 'EventTarget' "?

• 드래그/드랍 구현 중 data-set 을 사용하게 되었다.