0
424
Views¿Cómo hacer que mi componente droppable react-dnd también se pueda arrastrar?
Tengo este componente de cubo de basura que acepta algunos números. Pero después de aceptar números, también quiero arrastrar ese cuadro en lugar de elegir números del lado izquierdo y derecho de mi ventana. Aquí está mi código Dustbin.js actual:
import { memo } from 'react'; import { useDrop } from 'react-dnd'; const style = { height: '6rem', width: '6rem', marginRight: '5px', padding: '1rem', textAlign: 'center', fontSize: '1rem', lineHeight: 'normal', }; export const Dustbin = memo(function Dustbin({ shouldAccept, accept, lastDroppedItem, onDrop, }) { const [{ isOver, canDrop }, drop] = useDrop({ accept, drop: onDrop, collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop(), }), }); const isActive = isOver && canDrop; let backgroundColor = '#CBD5E1'; if (isActive) { backgroundColor = 'darkgreen'; } else if (canDrop) { backgroundColor = 'darkkhaki' } return (<div ref={drop} className='flex justify-center items-center' role="Dustbin" style={{ ...style, backgroundColor }}> { lastDroppedItem && lastDroppedItem?.name == shouldAccept && `${shouldAccept}`} </div>); });Aquí hay una imagen de cómo se ve mi aplicación en este momento.
·
Juan Pablo Isaza
1 answers
Answer question0
Para hacer que los componentes ondrop se puedan arrastrar, simplemente coloque un ondrag junto a ondrop de esta manera:
const [{ isDragging }, drag] = useDrag({ type: 'box-drag', item: () => { return { number: YourBoxNumber }; }, collect: (monitor: any) => ({ isDragging: monitor.isDragging(), }), }); luego actualice su useDrop para aceptar el tipo box-type tipo de arrastre que puede necesitar para escribir otro usedrop con el tipo box-type tipo de arrastre para esto.
const [{ handlerId }, drop] = useDrop({ accept: 'box-drag', collect(monitor) { return { handlerId: monitor.getHandlerId(), }; }, hover(item: { number }, monitor) { // do something on hover }, drop(item: { number }, monitor: DropTargetMonitor) { // do something when another box dropped on it. }, });Después de todo
drag(drop(ref)) ref es la referencia para su cuadro (actualmente su referencia es drop , después de arrastrar el nombre también se actualizará).
·
Juan Pablo Isaza
Report
Answer question