Drag and Drop 라이브러리(react-dnd-treeview), 상대적 위치값 활용
•
프로젝트를 하다보면 드래그 앤 드랍이 필요할 떄가 있다
•
우리 서비스가 그러했다. 구글 북마크바와 완전히 동일하게 동작해야 했기 떄문이다.
•
폴더의 순서를 저장해야 했고, 사용자가 옮긴 폴더 위치를 반영해야 했다.
•
이를 위해 아래 라이브러리를 사용하기로 했다. 언뜻 보면 프론트에서만 잘 처리해주면 될 거 같기도 하지만, 백에서 데이터를 잘 가공해 보내줘야 한다.
•
순서 저장은 아래 글을 참고했다.
◦
1,2,3과 같이 order 값을 저장하는 게 아니라 10000, 20000, 30000과 같이 저장한 후 그 사이에 누군가 들어오려하면 그 친구한텐 사이값(ex 15000)을 부여하는 방식이다
◦
우린 이 방식에 아래의 우리 정책을 하나 더 추가했다
▪
음식/중식 하단의 짜장면, 탕수육, 짬뽕이 각각 10000, 20000, 30000 값을 가지고,
▪
음식/한식 하단의 비빔밥, 불고기는 또다시 각각 10000, 20000 의 값을 가짐
•
우리 responseBody는 아래와 같았다
[
{
"id": 1,
"parent": 0,
"droppable": true,
"text": "음식"
},
{
"id": 42,
"parent": 0,
"droppable": true,
"text": "물건"
},
...
Java
복사
•
다만, 이 방식은 사용자가 지정한 순서를 표현해줄 수 없었다
This property controls the order of the child nodes. By default (true), they are sorted by the text property of each node. If false, sorting is disabled. In this case, the nodes will follow the order of the array passed to the tree property. It is also possible to customize the sorting by passing a callback function.
◦
위 라이브러리 공식 문서에 적힌 문장을 가져왔다.
◦
sort 기능이 존재하지만 text 기준으로만 정렬해준다.
◦
따라서 우린 text값에 우리가 원하는 order 값을 붙여서 보내주기로 했다.
•
바뀐 ResponseBody
[
{
"id": 1,
"parent": 0,
"droppable": true,
"text": "#10000#음식"
},
{
"id": 42,
"parent": 0,
"droppable": true,
"text": "#20000#물건"
},
...
Java
복사
•
결과적으로 원하는 대로 잘 동작했다.