[REACT] Drag and Drop2

학습일 : 2023. 04. 25

---

 

droppable에서 주는 첫번째 argument는 provided이다.
이건 magic이라고도 불린다.

 

첫번째 argument이기만 하면 원하는 대로 불러도 된다.

따라서 일단 나는 magic 이라고 적어주도록 하겠다.

 

 

(magic) 을 적어주고
밑에 ul태그 안에

{...magic.droppableProps}
ref={magic.innerRef}

를 적어주도록 한다.

 

 

 

<App.tsx>

import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

function App() {
  const onDragEnd = () => {};
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        <Droppable droppableId="one">
          {(magic) => (
            <ul ref={magic.innerRef} {...magic.droppableProps}>
              <Draggable draggableId="first" index={0}>
                {() => <li>One</li>}
              </Draggable>
              <Draggable draggableId="second" index={1}>
                {() => <li>Two</li>}
              </Draggable>
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
}

export default App;

실행시키고 개발자도구를 확인해보면
data-rbd-droppable-id, data-rbd-droppable-context라는 prop이 생겨있다.

Draggable에서도 마찬가지로 적용해주면 된다.

 

provided 또한 몇몇 props를 가지고 있는데 두가지가 있다.
1. draggableProps : 요소가 기본적으로 드래그 되기를 원한다면 적어주면 된다.
2. dragHandleProps

---

만약 유저로 하여금 li를 어떠한 위치에서든지 드래그해서 옮기도록 하고 싶다면
li에 draggableProps와 dragHandleProps를 넣어주면 된다.

그리고 ref를 꼭 적어주도록 한다.



<App.tsx>

import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

function App() {
  const onDragEnd = () => {};
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        <Droppable droppableId="one">
          {(magic) => (
            <ul ref={magic.innerRef} {...magic.droppableProps}>
              <Draggable draggableId="first" index={0}>
                {(magic) => (
                  <li
                    ref={magic.innerRef}
                    {...magic.draggableProps}
                    {...magic.dragHandleProps}
                  >
                    one
                  </li>
                )}
              </Draggable>
              <Draggable draggableId="second" index={1}>
                {(magic) => (
                  <li
                    ref={magic.innerRef}
                    {...magic.draggableProps}
                    {...magic.dragHandleProps}
                  >
                    two
                  </li>
                )}
              </Draggable>
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
}

export default App;

실행결과
이제 갖다대면 손모양으로 바뀌면서 끌어다 옮길 수 있게 되었다.