[javascript/react] 리액트 리스트(테이블) 항목 드래그하기(with react-beautiful-dnd)

[javascript/react] 리액트 리스트(테이블) 항목 드래그하기(with react-beautiful-dnd)

 

#오픈소스 - 잘만든 드래그 라이브러리

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

GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React

 

#설치

npm i react-beautiful-dnd

 

 

#코드

import { useState } from "react";
import {
  Avatar,
  Container,
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Paper,
} from "@mui/material";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const History = () => {
  const itemData = [
    {
      id: 0,
      img: "",
      title: "1111111111111",
      author: "11111111111111111",
    },
    {
      id: 1,
      img: "",
      title: "222222222222",
      author: "2222222",
    },
    {
      id: 2,
      img: "",
      title: "3333333333",
      author: "3333333333333333",
    },
    {
      id: 3,
      img: "",
      title: "44444444444444444444",
      author: "4444444444444444444",
    },
    {
      id: 4,
      img: "",
      title: "55555555555555555555555",
      author: "55555555555555555555555555555",
    },
  ];

  const [data, setData] = useState(itemData);
  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const items = Array.from(data);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    console.log(items);
    setData(items);
  };
  return (
    <div>
      <Container maxWidth="sm">
        <DragDropContext onDragEnd={handleDragEnd}>
          <Droppable droppableId="list">
            {(provided) => (
              <List
                {...provided.droppableProps}
                ref={provided.innerRef}
                sx={{
                  width: "100%",
                  maxWidth: 360,
                  bgcolor: "background.paper",
                }}
              >
                {data &&
                  data.map((item, index) => {
                    return (
                      <Draggable
                        key={item.id}
                        draggableId={item.id.toString()}
                        index={index}
                      >
                        {(provided) => (
                          <Paper
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            elevation={2}
                            sx={{ marginBottom: "10px" }}
                          >
                            <ListItem>
                              <ListItemAvatar>
                                <Avatar src={item.img} />
                              </ListItemAvatar>
                              <ListItemText
                                primary={item.title}
                                secondary={`Author: ${item.author}`}
                              />
                            </ListItem>
                          </Paper>
                        )}
                      </Draggable>
                    );
                  })}
                {provided.placeholder}
              </List>
            )}
          </Droppable>
        </DragDropContext>
      </Container>
    </div>
  );
};

export default History;

 

#핵심

-DragDropConext 싸준다

-Dropable 드롭 영역 결정

-provided 추가 후 각각 프로퍼티 삽입

-Draggable 드래그 결정 후 프로퍼티 삽입

 <DragDropContext>
   <Droppable droppableId="list">
      {(provided) => (
       <List
         {...provided.droppableProps}
         ref={provided.innerRef}>
                {data.map((item, index) => {
                    return (
                      <Draggable
                        key={item.id}
                        draggableId={item.id.toString()}
                        index={index}>                        
                     >
        </List>

 

#react-beautiful-dnd #드래그 #드롭 #드래그앤드롭 #리액트