3

I have a ticket component which contains some data that should be transferred into another place at the database.

const [{ isDragging }, dragref] = useDrag(() => ({
        type: ItemType.TICKET,
        item: {
            // data that should be transferred
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

unfortunately the drop handler in the target component doesnt fire when I drop the item on it.

const [{ isOver, canDrop }, dropref] = useDrop(() => ({
        accept: ItemType.TICKET,
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
        hover: (item, monitor) => {
             // works fine and prints the correct data
             console.log(item);
             console.log(monitor.canDrop()) // true
        },
        drop: (item) => console.log(item), // <---- doesn't work somehow
    }));

What I absolutely don't understand is, why the hover listener in the useDrop Hook works absolutely fine, but the drop listener doesn't.

First I though that some other onDrop or onDragOver listener (from when I did not used react-dnd) might interrupt it but even after deleting every single onDragOver and onDrop listener the onDrop listener doesn't fire.

Note: ofc I surrounded everything with the DndProvider and the HTML5Backend. On a whole other part of the app both hooks work just as expected. I am using react-dnd 16.0.0

locrizak
  • 12,192
  • 12
  • 60
  • 80
PRSHL
  • 1,359
  • 1
  • 11
  • 30

1 Answers1

0

I encountered the same issue and after spending some time testing and comparing the working parts v.s. non-working parts. I found that it was because I have <img> elements in those non-working parts. As long as the cursor starts with the <img> elements, the drop will never be fired. So solve this, you have to add draggable="false" to those <img> elements.

Hope it helps.

Zhaodong Wang
  • 1