Search code examples
javascriptreactjsreact-dndonmouseup

Mouseup event not getting triggered when component is dropped using React-dnd

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

Solution

  • 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>
);