-
Notifications
You must be signed in to change notification settings - Fork 4
Drag Drop
김무성 edited this page Dec 2, 2021
·
1 revision
현업에서도 애용하는 드래그/드랍 라이브러리를 사용할까 라는 유혹을 참고 성장을 위해 직접 구현해봤다.
우선 태그가 드래그 되는 모습이 보이기 위해 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이 처음에 동작을 안했었던 이슈 가 있었는데 아래를 보며 해결했다.
- 추후드래그 드랍시 바뀌는 태그들에게 애니메이션을 넣고싶다.
javascript drag and drop 구현 시도와 시행착오
- event target 에서 innerText가 잡히지 않을 때
error " Property 'innerText' does not exist on type 'EventTarget' "?
- 드래그/드랍 구현 중 data-set 을 사용하게 되었다.