React 관련 싹훑기(11) - Reordering blocks using react-beautiful-dnd

일단 블럭을 구조화해놓고 추가나 탭 같은건 되는데 실질적으로 블럭을 reordering 하는 것은 어떻게 하는지 고민을 해보았다. 

 

아래는 현재의 화면이다. 

 

우측에 있는 버튼을 눌렀을때 잡고 이동할 수 있도록 하려고 하는데, 어떻게 하는지 잘몰라서 찾아보았다. 

 

삽질을 하다보니 아래와 같은 라이브러리를 찾을 수 있었다. 

 

https://github.com/atlassian/react-beautiful-dnd

atlassian/react-beautiful-dnd

 

감사인사를 드리고 구현을 하면 될것같다... 정말 고마운 사람들. 

 

중첩된 예제

내가 블럭을 nested 구조로 짜서, drag and drop이 조금 복잡해졌다. 그래서 아래의 코드를 보고 참고했다. 

 

https://codesandbox.io/s/j4yvnr7n83?file=/src/questions.js 

react-beautiful-dnd-nested-drag-example - CodeSandbox

 

 

된다~

 

 

앞으로 할일

하지만 대신에 엔터쪽이나 탭쪽에 효율적으로 안짜놓아서인지 코드가 변경될때마다 dom을 찾아서 focusing을 해주는기능이 제대로 동작하지 않아서 그 기능을 개선해야할 것 같다. 그리고 이제 정리가 되면 삭제 기능도 만들고, 페이지 별로 렌더링 바뀌도록 조금 개선만해주면 제법 마무리가 될 것 같다.