framer motion으로 dnd 구현하기

drag and drop 기능를
framer motion 라이브러리의 Reorder 컴포넌트를 이용하여 간편하게 구현할 수 있다.

Reorder를 이용해서 Drag and Drop 구현하기

기본적인 사용법

• Reorder.Item : 드래그 될 컴포넌트
• Reorder.Group : 드래그 될 컴포넌트를 감싸는 Container

Reorder.Item 컴포넌트들을 Reorder.Group 컴포넌트로 감싸고,
Reorder.Group 컴포넌트에 드래그 리스트를 제어하는 setItems메소드를 넘겨주면 알아서 드래그에 따라 컴포넌트의 순서를 재배치해준다.

import { Reorder } from "framer-motion"
import { useState } from "react"

function List() {
  const [items, setItems] = useState([0, 1, 2, 3])
  
  return (
    <Reorder.Group axis="y" values={items} onReorder={setItems}>
      {items.map((item) => (
        <Reorder.Item key={item} value={item}>
          {item}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  )
}

참고 : https://www.framer.com/motion/reorder/

y축으로만 드래그 가능하도록 하기

Reorder.Item 컴포넌트에 drag="y"을 주면 컴포넌트를 y축으로만 드래그 가능하도록 할 수 있다.

반대로, drag="x" 속성을 주면 x축으로만 드래그 가능하도록 설정 할 수 있다.

const DNDItem = ({item}) => {
	return (
		<Reorder.Item
          	value={item}
          	drag="y"
          >
			<Icon />
		</Reorder.Item>		
	)
}

햄버거 아이콘으로만 드래그 가능하도록 하기

드래그 되는 컴포넌트 아무곳이나 끌어서 드래그 되도록 하는 것이 아닌,
특정한 아이콘을 끌어서만 드래그 되도록 하고싶었다.

1. 먼저 드래그 컴포넌트에서 드래그를 막는다.

const DNDItem = ({item}) => {
	const dragControls = useDragControls();
  
	return (
		<Reorder.Item
          	value={item}
          	dragControls={dragControls}
	    	dragListener={false}
          >
			<Icon />
		</Reorder.Item>		
	)
}

2. 아이콘에 드래그 핸들러를 연결한다.

icon에 pointer down 이벤트가 발생하면,
드래그 핸들러를 통해 드래그를 동작시킨다.

const DNDItem = ({item}) => {
	const dragControls = useDragControls();
  
	return (
		<Reorder.Item
          	value={item}
          	dragControls={dragControls}
	    	dragListener={false}
          >
			<Icon 
              onPointerDown={(e) => controls.start(e)}
            />
		</Reorder.Item>		
	)
}

완성 스크린샷