반응형
[React] DnD - Drag andDrop for React
https://react-dnd.github.io/react-dnd/about
React DnD
react-dnd.github.io
React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.
Installation
npm install react-dnd react-dnd-html5-backendThe second package will allow React DnD the HTML5 drag and drop API under the hood. You may choose to use a third-party backend instead, such as the touch backend.
// Let's make <Card text='Write the docs' /> draggable!
import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'
/**
* Your Component
*/
export default function Card({ isDragging, text }) {
const [{ opacity }, dragRef] = useDrag(
() => ({
type: ItemTypes.CARD,
item: { text },
collect: (monitor) => ({
opacity: monitor.isDragging() ? 0.5 : 1
})
}),
[]
)
return (
<div ref={dragRef} style={{ opacity }}>
{text}
</div>
)
}
react-dnd-example-3 - CodeSandbox
auto-generated package for codesandbox import
codesandbox.io
반응형
'프로그래밍 > Script' 카테고리의 다른 글
| How TO - Create a Draggable HTML Element (0) | 2022.10.06 |
|---|---|
| “제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란? (0) | 2022.10.05 |
| [Node.js] Node.js 패키지 생성 및 실행 - Node.js package, npm init, npm run (0) | 2022.09.07 |
| [React.js] React.js 시작하기 (0) | 2022.07.27 |
| [Chart] billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js. (0) | 2022.07.26 |