[React | JavaScript] 드래그 앤 드롭 drag and drop 구현하기

리액트 Sortablsjs로 드래그 앤 드롭 구현하기

투두 리스트를 구현하기 위한 드래그 앤 드롭 기능을 간단하게 구현할 것입니다. 🥰

 

✅필요 라이브러리 설치

• react-sortablejs
• sortablejs

npm install --save react-sortablejs sortablejs

 

💗 아이템 드래그 앤 드랍 구현

ReactSortable을 이용해서 아이템 간의 위치 변경을 구현할 수 있습니다.

• useState를 통해 setList와 list를 설정하면 자동으로 아이템의 위치를 업데이트할 수 있습니다.
• group = "shared" 코드를 추가함으로써 리스트 간의 아이템 공유 및 이동이 가능하게 구현할 수 있습니다.

function Item() {
  const [items, setItems] = useState(["eat", "sing", "love"]);

  return (
    <div>
      <ReactSortable
        className="itemWrapper"
        group="shared"
        animation={200}
        delay={1}
        swap
        multiDrag
        setList={setItems}
        list={items}
      >
        {items.map((item) => (
          <SItem>{item}</SItem>
        ))}
      </ReactSortable>
    </div>
  );
}

export default Item;

 

💗 리스트 드래그 앤 드랍 구현

Sortablejs을 이용해서 아이템 간의 위치 변경을 구현할 수 있습니다.

className을 이용해서 드래그 앤 드랍을 적용할 영역을 지정해줍니다.

export default function App() {
  useEffect(() => {
    const columns = document.querySelectorAll(".column");
    columns.forEach((column) => {
      new Sortable(column, {
        animation: 150,
        ghostClass: "blue-background-class"
      });
    });
  });
  const [lists, setList] = useState(["to do", "doing", "done"]);
  return (
    <Container className="App">
      <ListContainer className="column">
        {lists.map((list) => (
          <List>
            <h1>{list}</h1>
            <Item />
          </List>
        ))}
      </ListContainer>
    </Container>
  );
}

Sortable안에, onUpdate 코드를 작성해서 업데이트 후에 동작할 함수를 지정해 줄 수 있습니다.

        onUpdate({ oldIndex, newIndex }) {
         인덱스_업데이트_함수(oldIndex, newIndex);
        }

oldIndex와 newIndex 값에 대한 정보를 라이브러리에서 자동으로 구해주기 때문에 이런식으로 업데이트마다 실행할 코드를 작성할 수 있습니다.

 

🎉 최종 코드 및 Demo