react js on drag code example
Example: react drag and drop
Install:
yarn add react-dnd react-dnd-html5-backend
Example:
// 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({
item: { type: ItemTypes.CARD, text },
collect: monitor => ({
opacity: monitor.isDragging() ? 0.5 : 1,
}),
})
return (
<div ref={dragRef} style={{ opacity }}>
{text}
</div>
)
}