[Drag and Drop API] 드래그 엔 드롭 기능 개발 기록

자바스크립트 드래그 엔 드롭 이벤트를 다루어 볼 수 있는 좋은 기회가 찾아 왔다.

 

실제 회사 서비스에 도입 하기 전,

테스트 겸 해당 기능을 갖춘 UI를 퀵퀵퀵(?) 하게 만들어 보고 싶었지만 

난 "신입 개발자야" 티를 내듯 별것 아닌 기능에 생각보다 많은 고민과 시간을 투자했다.

 

어쨋든, 혼자서 구현해본 이 작은 기능이

내부적으로 어떻게 돌아가게 만들었는지 공유하고 싶어졌다. 

 

완성본 캡처

 

로직

HTML 파일

 

해당 기능의 로직을 포인트로 간단하게 적어보자면

 

1. 자바스크립트가 load 되면 selector를 이용해 id가 app인 HTML 요소를 App이라는 함수의 인자로 넘겨 해당 함수 scope 에서 사용할 수 있게 만든다.

시작 파일

 

2. 넘겨 받은 인자를 부모로 기본 UI를 렌더링 하고 드래그 엔 드롭 이벤트를 바인드 시켜준다.

렌더링 함수

드래그 엔 드롭 이벤트 등록

 

3. 드래그 대상 객체들은 순서를 보장할 수 있는 배열 자료구조로 state 객체에 등록되어 있다.

테스트용 데이터

 

4. setState함수로 등록된 배열 구조의 변화를 줄 수 있게 하고 자동적으로 재렌더링이 되게 만든다.

setState 함수 호출하면 rendering 함수 자동 호출

 

5. 드래그를 해야하는 인원수에 따라 UI가 변경되게끔 만드는 것이 살짝 까다로웠다.

배열의 크기와 드래그 대상의 순서에 따라 랜더링 할때 클래스 네임을 정의하고 네임에 따라 다른 style을 주었다. 

 

프로필 HTML

 

드래그 엔 드롭 이벤트

 

드래그를 할때 드래그 하는 대상의 요소를 저장해 둔다.

드래그 시작 이벤트에 등록할 함수

 

이벤트 위임을 사용했기 때문에 대상 요소를 찾고 대상 요소에 들어올때 그리고 나갈때 class를 추가/삭제 해줌으로써 알맞는 style을 준다.

드래그하는 요소가 드롭할 대상에 들어오거나 나갈때 동작하는 이벤트에 등록할 함수

 

드래그 하는 대상의 index 값과 드롭하는 대상의 index 값과 바꾸어 state에 변화를 주고 자동적으로 재랜더링 되도록 만들었다.

드래그 요소를 드롭했을때 발생하는 이벤트에 등록할 함수

 

 

완성본 테스트 시연 영상

 

끝.