1

I don't know if this question has been asked before, but I want to do the following: I am dragging an image and dropping it in a container, but instead of the image being dropped, I want (let's say) an h1 element to be dropped in the container.

Edit: Here's the code for the drag object (the one I'm dragging):

const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.SECTION,
        collect: monitor => ({
            isDragging: !!monitor.isDragging()
        })
})

<img src={accreAss1} alt="Accre Asset 1" ref={drag} style={isDragging ? { "cursor": "copy" } : { "cursor": "pointer" }}/>

And here's the code where I want to drop the dragged object:

let children = [];
const [{ canDrop }, drop] = useDrop({
    accept: ItemTypes.SECTION,
    drop: () => {
        children.push(<h1>Heading to be added</h1>/>)
        console.log(children)
    },
    collect: monitor =>  ({
        canDrop: !!monitor.canDrop()
    })
})

/* ---- some code ----*/
return (

    <section className="container">
        {children}
    </section>
)

I am seeing the heading in the console but it does not show on the className="container"

Ahsan Shahid
  • 13
  • 1
  • 4
  • I guess you might need [custom drag layer](https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer), if it is the case, let me know so I can be more specific if you add simple code of what you need – amirhe Oct 15 '21 at 12:06
  • @AmirhosseinEbrahimi I don't quite understand why custom drag layer is used, but I have edited my question for further clarification. – Ahsan Shahid Oct 15 '21 at 12:58
  • I assume you wish to modify your image while dragging to for example its caption. Okay, I get what you're saying, but do children treat your code the same way you do, or is it just a meta format to express what you want to accomplish? cause you need to force react to re-render by children update – amirhe Oct 15 '21 at 13:27
  • Thanks @Amirhe. I got the solution, I just needed to use setState to rerender! – Ahsan Shahid Oct 19 '21 at 14:40
  • You can check [this](https://stackoverflow.com/a/59602379/10321531) out for more clean version of force render – amirhe Oct 19 '21 at 14:42

0 Answers0