[react-sortablejs] 리액트 순서 드래그 앤 드랍

react-sortablejs 라이브러리 사용

핸들 동작 테스트 코드(베이스 of 베이스 코드 ) 입니다.

리액트 라이브러리 중 가장 단순하지만 기본 기능은 탄탄하니 응용하여 사용 가능 할듯 합니다.

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


const TestDrag = () => {
    const [state, setState] = useState([
        { id: 1, name: "Peace" },
        { id: 2, name: "Soma-damian" },
        { id: 3, name: "Lee" },
    ]);

    const sortableOptions = {
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        ghostClass: "ghost",
        group: "shared",
        forceFallback: true,
        handle: '.handle',
      };


    return (
        <div>
            <ReactSortable list={state} 
                           setList={setState} 
                           {...sortableOptions}
                           dragClass="sortableDrag"
            >
                {
                    state.map((item) => (
                        <div key={item.id} className="draggableItem">
                            {item.name} {item.description}
                            <button className="handle">버튼</button>
                        </div>
                    ))
                }
            </ReactSortable>
        </div>
    );
};

export default TestDrag;

react-sortablejs