I am working on a project where I need to implement drag and drop functionality using React-dnd package. Which is I am able achieve. But the issues is, the target component (where draggable items will be dropped) contains mouseup event which is getting triggered in every scenarios except when I drop any component in it. It needs to be triggered even in the case of drop as well but its not getting triggered. I tried manual triggered as well and it triggered but the values like offsets are not as per expected.
I have share sample code sandbox where Dustbin.tsx contains that mouseup event which is not getting triggered when any draggable component is dropped into it. Thanks.
Sandbox link: https://codesandbox.io/s/dawn-snowflake-ej08d0?file=/src/Dustbin.tsx
Why using onmouseup?
The onmouseup event occurs when a user releases a mouse button over an element.
If you want to detect if something is dropped inside that container then please use ondrop
Execute a JavaScript when a draggable element is dropped in a element:
return (
<div
ref={drop}
style={{ ...style, backgroundColor }}
onDrop={() => console.log("dropped")}
>
{isActive ? "Release to drop" : "Drag a box here"}
</div>
);