[React] 같은 board안에서의 움직임

원래 cde순서로 되있던걸 e를 드래그해서 가운데 위치로 바꿨다

 

console.log찍었더니

 

일단 칸반의 이름은 Doing으로 동일해서 destination 이랑 source의 droppableId가 동일하게 'Doing"으로 나온다.

(동일한 칸반 내에서의 움직임을 일단 공부하자)

 

일단 내가 드래그한 개체 => draggableId 

움직이기전 => source

움직인후 => destination

 

이렇게 정리해볼수있다.

---

이제 드래그해서 위치가 바뀌게 onDragEnd함수를 만들어보자.

 

 

 

우린 일단 info에서 destination, draggableId, source를 이용할거다.

const { destination, draggableId, source } = info;

 

 

같은 보드안에서만 움직이는 경우만 생각할 거니까 조건문을 만들자.

if(destination.droppableId === source.droppableId){}

 

 

변경할 board를 복사해서 변경하자.

이런 식으로 바꿀거다. 

const boardCopy = [...allBoards["Doing"]];

코드로 제대로 바꾸면

const boardCopy = [...allBoards[source.droppableId]];

 

 

 

이제 복사한걸로 지난번에 공부한것처럼 변경을 하자.

boardCopy.splice(source.index, 1);
boardCopy.splice(destination?.index, 0, draggableId);

 

 

 

나머지 board와 변경된 board를 같이 리턴해준다.

return {
	...allBoards,
    [source.droppableId]: boardCopy,
}

 

---

완성코드

const onDragEnd = (info) => {
  //console.log(info);
  const { destination, draggableId, source } = info;
  if(destination?.droppableId === source.droppableId){
    setToDos(allBoards =>{
      const boardCopy = [...allBoards[source.droppableId]];
      boardCopy.splice(source.index, 1);
      boardCopy.splice(destination?.index, 0, draggableId);
      return {
        ...allBoards,
        [source.droppableId]: boardCopy
      }
    })
  }
}