[javascript/react]리액트에서 list drag and drop (리스트 드래그 앤 드롭 구현)

#react-sortablejs를 이용하여 구현하였다

https://github.com/SortableJS/react-sortablejs

GitHub - SortableJS/react-sortablejs: React bindings for SortableJS

 

#설치

npm install --save react-sortablejs sortablejs

 

#구현

import React, { useState } from "react";
import { ReactSortable } from "react-sortablejs";

const Test=(props)=>{
    const [state, setState] = useState([
        { id: 1, name: "list01" },
        { id: 2, name: "list02" },
      ]);
    return(
        <ReactSortable list={state} setList={setState} animation={200} delayOnTouchOnly={true} delay={2} >
        {state.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </ReactSortable>
    )
}

export default Test;

 

 

#react #sortablejs #drag #drop #drag&drop #드래그앤드롭