[REACT] Drag and Drop - dragHandleProps

학습일 : 2023. 04. 26

---

 

드래그 앤 드롭에서 dragHandleProps의 역할은

 dragHandleProps를 적어준 부분이 handle이 되어서 

 

 

그 부분을 쥐고 그래그 앤 드롭을 할 수 있게 되는 것이다.

 

 

아래 코드로 보았을 때는

span 안에서 dragHandleProps을 주었기 때문에

span인 별모양이 핸들이 되는 것이다.

 

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}>
                    <span {...magic.dragHandleProps}>★</span>
                    one
                  </li>
                )}
              </Draggable>
              <Draggable draggableId="second" index={1}>
                {(magic) => (
                  <li ref={magic.innerRef} {...magic.draggableProps}>
                    <span {...magic.dragHandleProps}>★</span>
                    two
                  </li>
                )}
              </Draggable>
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
}

export default App;

 

 

실행결과

이젠 글자 전체가 아니라 별모양에 갖다댔을 때만

손모양으로 바뀌게 되고

그 부분을 쥐고 드래그 앤 드롭을 할 수 있게 된다.