리액트 드래그 앤 드롭(DND)

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

https://aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/

 

위의 두 개 사이트를 참고하며 드래그 앤 드롭을 정리했다.

 

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5

🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기

이건 그냥 개쩌는 정리.. 

 

 

 

 

 

기본 세팅은 이렇게 해놨다. 만들고 있는 투두리스트에 적용할 예정이기에, 투두리스트와 동일한 환경임을 가정했다. 

 

 

 

요소에 draggable 속성을 적용하면 드래그 효과를 사용할 수 있다. 각 item 박스들을 드래그해야 하기에 div 태그에 draggable를 적용시켜 준다.

 

오른쪽 사진처럼 요소가 드래그됨을 확인할 수 있다.

 

 

 

mdn 사이트 참고해서 드래그 발생 및 요소 위에 올라갔을 때 사용될 함수를 만들 것이다.

 

 

 

 

 

사용할 Drag event

 

onDragStart : 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생

 

onDragEnter : 드래그한 요소나 텍스트 블록이 적합한 드롭 대상 위에 올라갔을 때 발생

 

onDrogEnd : 드래그가 끝났을 때 발생

 

 

 

 

 

구현

함수와 이벤트 핸들러의 이름을 동일하게 했음. 헷갈림 주의

1. useRef를 통해, 드래그를 시작하는 요소의 index번호와 드래그한 요소와 겹치는 요소의 index 번호를 받을 수 있는 변수를 미리 생성한다. dragItem과 dragEnterItem으로 생성했다.

 

2. 드래그가 시작되는 요소의 인덱스 번호를 dragitem에 저장하는 onDragStart 함수를 만든다. 그리고 겹치는 요소의 인덱스 번호를 dragEnterItem에 저장하는 onDragEnter 함수도 만든다

 

3. onDragStart 속성을 통해, 드래그가 실행되었을 때 onDragStart 함수가 실행되게 하고, onDragEnter 속성 통해 요소가 겹쳤을 때 onDragEnter 함수가 실행되게 한다. 

 

4. 마지막으로 요소의 인덱스 번호를 각 함수의 매개변수로 보내주면 끝이다.

 

 

 

Itme 1을 선택했을 때 Item 1의 인덱스 번호가 출력됨을 확인할 수 있다. 또한 요소가 겹칠 때는 겹치는 item 2의 인덱스 번호인 2가 출력됨을 확인할 수 있다. 

 

마지막으로 요소를 내려놨을 때, 사용될 함수를 만들면 끝이다.

 

 

 

요소를 내려놨을 때 실행 할 onDrop 함수이다. 편의를 위해 list State도 같이 가져왔다.  

 

onDrop 함수에 대해 한 줄 한 줄 해석을 써보겠다

 

1. newList 변수에 list State에 담긴 모든 값을 저장한다.

 

2. dragItemValue에 현재 드래그된 요소의 내용을 담는다.

 

3. splice 메서드를 통해 전체 리스트에서 현재 드래그된 요소를 삭제한다.

 

4. splice 메서드를 통해 겹치는 요소 바로 뒤에, 2번에 저장된(현재 드래그된) 요소를 넣는다.

 

5. 현재 선택요소와 겹치는 요소의 인덱스 값을 저장하는 dragItem.current와 dragEnterItem.current를 null로 초기화한다.

 

6. 마지막으로 상태변화함수 setList에 newList를 인수로 넣어줌으로써 list를 업데이트시킨다.

 

 

 

 onDragEnd를 통해 드래그를 끝냈을 때, 위에서 만든 onDrop함수가 실행되게 한다.

 

 

 

드래그 앤 드롭이 잘 되는 것을 확인할 수 있따,,

 

이제는 투두리스트 프로젝트에 적용할 일만 남았다.