react-draggable을 이용해서 드래그 앤 드롭 구현하기

 

코딩 애플에서 리액트를 배우며 뼈대만 만들어 놓은 쇼핑몰이다.

당장 어떤 기능을 추가해볼지 마땅히 생각이 나지 않던 차에 최근 본 상품 목록이 스크롤 위치나 화면 크기에 따라 몹시 거슬린다는 사실을 알게 됐다.

mouse move 이벤트를 이용하여 직접 만들어봐도 되겠지만, 예전에 자바스크립트에서 구현해본 결과 그다지 마음에 들지 않았고 이번에는 라이브러리를 활용해보기로 했다.

 

https://www.npmjs.com/package/react-draggable

react-draggable

해당 링크에 자세한 설명이 적혀있다.

나는 그냥 사용자가 원하는 위치에 드래그&드롭할 수만 있으면 되기 때문에 어떤 옵션도 사용하지 않을 예정이다.

 

 

1. 라이브러리 설치

npm install react-draggable

 

2. 사용할 js 파일에 import하기

import Draggable from 'react-draggable'; // 기본
import {DraggableCore} from 'react-draggable'; // 자세한 설정을 원할 경우(링크 참조)

 

3. useState에 x, y값을 지정할 객체 만들어주기.

  const [sidePosition, setSidePosition] = useState({ x: 0, y: 0 });

 

4. <Draggable></Draggable>로 원하는 Elements 감싸기

    <Draggable onDrag={(e, data) => props.trackPos(data)}> 요소요소 </Draggable>

드래그 좌표 값을 trackPos가 가져간다.

  const trackPos = (data) => {
    setSidePosition({ x: data.x, y: data.y });
  };

해당 좌표값으로 Draggable을 이동시키는 원리.

이해를 위해 밑에 작성했을 뿐 useState랑 나란히 두면 됩니다.

 

5. 결과물을 감상한다.

 

 

사람들이 왜 라이브러리의 노예가 되는지 알 것 같다.

너무 편하다..

 

 

 

 

6. 약간 부수적인 것들

 6-1. 내가 옮기려는 요소의 경우 img 태그가 포함되어 있는데, img는 기본적으로 브라우저에서 draggable이 true로 설정되어 있다.

즉, 우리의 react-Draggable을 무시하고 이미지 부분만 혼자서 드래그 되려고 한다. 그래서 나는 해당 태그에 draggable="false"를 지정해줬다.

 6-2. css에서 cursor:move를 지정해줘야 drag 가능한 요소라는 것을 커서가 변환되며 알려준다.