[React] 리액트 요소 드래그앤드롭 구현

완성본 (클릭시 라이브 데모로 이동)

 

TL;DR

---

1. 드래그할 수 있는 요소로 변경 — draggable={true}
2. 드래그 시작 — onDragStart 이벤트 트리거
   • 드래그하고 있는 요소의 인덱스 정보 저장 — state.draggedFrom
   • 드래그 상태 true로 변경 — state.isDragging
   • 이벤트 트리거 시점의 엘리먼트 리스트 저장 — state.originalOrder
3. 마우스 커서가 드롭 가능한 영역에 있을 때 — onDragOver 이벤트 트리거
   • drop 이벤트를 사용할 수 있도록 dragOver 기본 이벤트 방지 — e.preventDefault()
   • 마우스 포인터 위치에 있는 요소의 인덱스 저장 — state.draggedTo
   • 엘리먼트 순서 변경 — state.updatedOrder
     드래그중인 아이템을 마우스 포인터 위치(draggedTo 인덱스)로 이동. 기존 마우스 포인터 위치에 있던 요소는 바로 뒤로 밀림.
4. 드롭 가능한 영역에서 드롭했을 때 — onDrop 이벤트 트리거
   • 순서를 변경한 엘리먼트 리스트 렌더
   • 드래그앤드롭 관련 상태 초기화

 

배경 지식

---

HTML 드래그앤드롭 Web API를 이용해 리스트 엘리먼트의 순서를 마우스 드래그앤드롭으로 바꿀 수 있다. 엘리먼트의 draggable 속성을 true로 주면 해당 요소는 드래그 가능한 객체가 된다. 이미지, 링크, 선택한 텍스트(텍스트 블록)는 기본적으로 드래그할 수 있다. 드래그 가능 상태가 되면 onDragStart 같은 드래그 관련 이벤트를 사용할 수 있다. onDragStart는 드래그가 시작되면 트리거되는 이벤트다.

// 리스트 요소
<div draggable="true" onDragStart={startDragging}>
  Drag Me 🍰
</div>;

 

엘리먼트에 onDrop과 onDragOver 이벤트를 걸면 드롭 가능한 영역(유효한 드롭 대상)이 된다. 이 두 이벤트를 활용해 드래그앤드롭 기능을 구현할 수 있다. onDragOver는 마우스 포인터에 있는 요소가 유효한 드롭 대상일 때 트리거 되며, onDrop은 드롭 가능한 영역에서 드롭했을 때 트리거되는 이벤트다.

<section onDrop={updateDragAndDropState} onDragOver={receiveDraggedElements}>
  Drop here 🤲🏻
</section>;

 

드래그한 (요소)데이터와 상호 작용하기 위해 setData()와 getData() 같은 이벤트 메서드를 사용할 수도 있다. 현재 드래그 하고 있는 요소 정보(id 등)를 setData()를 통해 저장하고, 드롭했을 때 getData()를 통해 요소 정보를 불러온 후 재정렬 하는 방식으로 활용할 수 있다.

event.dataTransfer.setData(key, value); // 여러 key를 이용해 다수의 데이터를 저장할 수 있다
event.dataTransfer.getData(key);

 

상태

---

리액트 컴포넌트 바깥 영역에 리스트를 렌더할 상태(items)와, 드래그앤드롭과 관련한 상태의 초기값을 정의한다. 드래그앤드롭 상태엔 드래그 중인 요소의 인덱스, 업데이트 전후의 렌더 리스트(items), 드래그 상태를 저장하는 곳이다.

const items = [
  { number: "3", title: "👨🏻‍💻 Tech Man" },
  // 생략
];

const initialDnDState = {
  draggedFrom: null, // 드래그를 시작한 요소의(마우스를 클릭하여 움직인 요소) 인덱스
  draggedTo: null, // 드롭 대상 요소의 인덱스(드래그하여 마우스 커서가 위치한 요소의 인덱스)
  isDragging: false, // 드래그 여부 Boolean
  originalOrder: [], // 드롭하기전(순서가 바뀌기 전) 기존 list
  updatedOrder: [], // 드롭한 후 순서가 바뀐 list
};

 

useState 훅을 이용해 렌더 리스트와 드래그앤드롭 초기값을 컴포넌트 내부 상태로 둔다.

const Lists = () => {
  const [list, setList] = useState(items); // 렌더될 요소
  const [dragAndDrop, setDragAndDrop] = useState(initialDnDState); // D&D 관련 상태

  return (
    <section>
      <ul>
        {list.map((item, index) => (
          <li>...</li>
        ))}
      </ul>
    </section>
  );
};

 

드래그 가능한 요소로 변경

---

➊링크 ➋이미지 ➌선택한 텍스트(텍스트 블록)는 기본값이 드래그 가능이다(draggable="ture")

 

<li> 태그의 draggable 속성을 true로 변경하여 드래그 가능한 요소가 되도록 한다. 현재 드래그 하고 있는 요소를 판별하고 재정렬할 때 사용하기 위해 요소의 index를 data 속성에 할당한다.

 

data 속성은 data-데이터이름 형식으로 정의하고, elem.dataset.데이터이름 으로 조회할 수 있다.

return (
  <section>
    <ul>
      {list.map((item, index) => (
        <li draggable={true} data-position={index}>
          <span>{item.number}</span>
          <p>{item.title}</p>
        </li>
      ))}
    </ul>
  </section>
);

 

드래그 이벤트 핸들러

---

onDragOver와 onDrop 이벤트가 걸려있는 DOM이 드롭 가능한 영역(유효한 드롭 대상)이 된다.

 

onDragStart, onDragOver, onDrop 및 onDragLeave(선택) 3개의 이벤트가 필요하다.

 

• onDragStart : 드래그를 시작할 때(마우스를 클릭한 후 움직일 때) 트리거
• onDragOver : 마우스 아래에 있는 요소가 유효한 드롭 대상일 때(아이템이 드롭될 수 있는 곳) 트리거
  → 마우스가 유효한 드롭 대상 위에 위치해 있다면 onDragOver 이벤트가 수백 밀리 초마다 계속 트리거 됨
• onDrop : 드롭 가능한 영역에서 마우스 클릭을 해제하여 드롭했을 때 트리거
• onDragLeave : 드롭 가능한 영역을 벗어났을 때 트리거
• onDragEnter : 드롭 가능한 영역으로(대상 객체) 처음 진입했을 때 트리거

 

onDragStart — 드래그 시작

드래그하는 동안 draggable 요소는 반투명 형태로 마우스 포인터를 따라다닌다

 

마우스로 요소를 클릭하고 드래그를 시작하면 onDragStart 이벤트가 트리거 된다. 이 이벤트 핸들러에선 ➊드래그하고 있는 요소의 인덱스 정보를 조회한 후 저장하고, ➋드래그 상태를 true로 변경하고, ➌해당 이벤트가 발생한 시점의 엘리먼트 리스트 상태를 저장한다.

const onDragStart = (e) => {
  const initialPosition = Number(e.target.dataset.position);
  setDragAndDrop({
    ...dragAndDrop,
    draggedFrom: initialPosition, // 드래그를 시작한 요소의 인덱스
    isDragging: true,
    originalOrder: list, // 현재 list 상태 저장
  });
};

 

onDragOver — 드롭 가능 영역 ⚡️

onDragOver 이벤트는 수백 밀리초마다 발동하고 이와 비슷한 onDragEnter는 단 한번만 발동한다.

 

드래그 상태에서 마우스 포인터에 있는 요소가 유효한 드롭 대상일 때 onDragOver 이벤트가 트리거된다. 이때 이벤트 target(event.target)은 마우스 커서 아래의 요소를 가리킨다. 이 핸들러에선 요소를 드롭했을 때 렌더할 리스트를 미리 준비해두는 작업(마우스 포인터에 따라 요소 순서 변경)을 수행한다.

 

❶ onDragOver, onDragEnter 이벤트는 드롭 이벤트를 취소시키는 기본 이벤트를 가진다. 드롭 이벤트를 사용하기 위해(드롭 허용) e.preventDefault() 메서드로 기본 동작을 방지한다 — 참고 링크

 

❷ 현재 마우스가 hover되고 있는(가리키고 있는) 영역의 item 인덱스 저장 — draggedTo

 

❸ 현재 드래그하고 있는 요소를 제외한 item 리스트 저장 — remainingItems

 

❹ 리스트 순서 변경. 현재 드래그중인 아이템을 draggedTo 인덱스로(위치)로 추가 — updatedOrder

드래그하고 있는 요소가 `4`(3번 인덱스), 호버중인 요소가 `2`(1번 인덱스)라고 가정. 요소 `4`가 요소 `2`의 위치로 이동하고, 요소 `2`는 요소 `4` 뒤로 가게끔 변경한다

 

const list = [1, 2, 3, 4, 5]; // 원하는 결과값 [1, 4, 2, 3, 5]
const filtered = list.filter((el) => el !== 4); // [1, 2, 3, 5] 드래그하고 있는 요소 제외
const from = filtered.slice(0, 1); // [1]
const to = filtered.slice(1); // [2, 3, 5]
const result = [...from, 4, ...to]; // [1, 4, 2, 3, 5]

 

❺ dragAndDrop 상태의 updatedOrder 및 draggedTo 업데이트. 만약 dragAndDrop 상태에 저장한 draggedTo와 현재 이벤트가 트리거돼서 저장한 draggedTo 값이 같다면 드래그앤드롭 상태 업데이트는 스킵한다.

const onDragOver = (e) => {
  e.preventDefault(); // onDragOver 기본 이벤트 방지
  const draggedTo = Number(e.target.dataset.position); // 현재 hover 되고 있는(마우스가 위치한) item의 인덱스
  const { originalOrder, draggedFrom } = dragAndDrop; // 기존 리스트 및 드래그중인 요소의 인덱스 조회
  const remainingItems = originalOrder.filter(
    (_, index) => index !== draggedFrom, // 현재 드래그 하고 있는 요소를 제외한 items 목록
  );

  // 리스트 순서 변경.
  // 현재 드래그중인 아이템을 draggedTo(현재 마우스가 위치한) 인덱스 위치로 추가
  const updatedOrder = [
    ...remainingItems.slice(0, draggedTo),
    originalOrder[draggedFrom], // 현재 드래그중인 아이템
    ...remainingItems.slice(draggedTo),
  ];

  // 순서 변경한 리스트 및 hover 요소의 인덱스(draggedTo) 업데이트.
  // 상태에 저장한 hover 요소 인덱스와 같지 않을때만 업데이트한다
  if (draggedTo !== dragAndDrop.draggedTo) {
    setDragAndDrop({
      ...dragAndDrop,
      updatedOrder, // 드롭 이벤트가 트리거되면 해당 리스트가 렌더됨
      draggedTo,
    });
  }
};

 

onDrop — 드롭

드롭 가능한 영역에서 드롭했을 때 onDrop 이벤트가 트리거된다. onDropOver에서 작업했던, 순서를 변경한 리스트를 렌더될 리스트(list)로 업데이트하고 dragAndDrop 상태를 초기화한다.

const onDrop = () => {
  // onDropOver에서 작업해둔(마우스 커서에 따라 순서를 변경한) 요소 리스트 업데이트
  setList(dragAndDrop.updatedOrder);

  // dragAndDrop 상태 초기화
  setDragAndDrop({
    ...dragAndDrop,
    draggedFrom: null,
    draggedTo: null,
    isDragging: false,
  });
};

 

onDragLeave

드롭 가능한 영역을 벗어났을 때 onDragLeave 이벤트가 트리거된다. 드롭 대상 요소에 대한 인덱스를 담는 상태인 DraggedTo 상태 값은 null로 설정한다 — 드롭 가능한 영역을 벗어나서 드롭 가능한 요소 자체가 없으므로

const onDragLeave = () => {
  setDragAndDrop({
    ...dragAndDrop,
    draggedTo: null,
  });
};

 

핸들러 할당

---

위에서 작성한 핸들러를 Drop 영역이 될 곳인 <li> 태그에 할당한다. onDragOver와 onDrop 이벤트 핸들러를 할당하면, 해당 요소는 드롭 가능한 영역이 된다.

return (
  <section>
    <ul>
      {list.map((item, index) => (
        <li
          // ...
          onDragStart={onDragStart}
          onDragLeave={onDragLeave}
          onDragOver={onDragOver}
          onDrop={onDrop}
        ></li>
        // ...
      ))}
    </ul>
  </section>
);

 

CSS

---

Placeholder 스타일

DROP HERE 부분이 Placeholder

 

드롭할 위치에 점선 모양의 Placeholder 스타일을 적용해 시각적 힌트를 줄 수 있다. draggedTo 상태(드래그를 시작한 후 마우스 커서가 위치한 요소의 인덱스)와 렌더한 요소의 인덱스가 같다면 .dropArea 클래스를 추가하고, 해당 클래스에 대한 placeholder 스타일을 지정하는 방법으로 구현할 수 있다.

return (
  <section>
    <ul>
      {list.map((item, index) => (
        <li
          className={dragAndDrop?.draggedTo === Number(index) ? "dropArea" : ""}
          // ...
        ></li>
        // ...
      ))}
    </ul>
  </section>
);

 

스타일을 위한 목적이므로 따로 태그를 추가하지 않고 ::before 수도 엘리먼트를 이용한다. 드래그를 시작하여 마우스 커서가 위치한 요소의 <li> 스타일은 .dropArea 클래스 스타일이 적용된다.

li {
  // ...
  &.dropArea {
    color: white !important; // 이모티콘을 제외한 텍스트 모두 흰색으로
    background: white !important;
    position: relative;

    &::before {
      content: "Drop Here";
      color: "#687bf7";
      font-size: 0.5em;
      text-transform: uppercase; // 대문자
      width: 100%;
      height: 100%;
      border: 2px dashed "#687bf7"; // 점선
      border-radius: 3px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    span {
      display: none; // 아이템 넘버 감추기
    }

    p {
      margin-left: 1em;
    }
  }
  // ...
}

 

Margin 여백 애니메이션

transition 속성을 활용해 마우스를 드래그하여 Placeholder 스타일이 적용되고, 다시 기존 <li> 스타일로 돌아올 때마다 요소의 텍스트가 움직이는 듯한 효과를 줄 수도 있다.

li {
  p {
    // margin-left가 적용되기까지의 시간을 50ms로 설정
    transition: margin-left 50ms ease-in-out;
  }
}

 

레퍼런스

---

• Creating a Drag and Drop List with React Hooks
• HTML 드래그 앤 드롭 API - Web API | MDN  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요