Estoy trabajando en un proyecto en el que necesito implementar la funcionalidad de arrastrar y soltar usando el paquete React-dnd. Que es lo que soy capaz de lograr. Pero el problema es que el componente de destino (donde se soltarán los elementos arrastrables) contiene un evento mouseup que se activa en todos los escenarios, excepto cuando dejo caer cualquier componente en él. También debe activarse incluso en el caso de una caída, pero no se activa. También probé la activación manual y se activó, pero los valores como las compensaciones no son los esperados.
He compartido un espacio aislado de código de muestra donde Dustbin.tsx contiene ese evento mouseup que no se activa cuando se coloca cualquier componente que se pueda arrastrar. Gracias.
Enlace de la caja de arena: https://codesandbox.io/s/dawn-snowflake-ej08d0?file=/src/Dustbin.tsx
¿Por qué usar onmouseup ?
El evento onmouseup ocurre cuando un usuario suelta un botón del mouse sobre un elemento.
Si desea detectar si algo se cae dentro de ese contenedor, utilice ondrop
Ejecute un JavaScript cuando un elemento arrastrable se suelte en un elemento:
return ( <div ref={drop} style={{ ...style, backgroundColor }} onDrop={() => console.log("dropped")} > {isActive ? "Release to drop" : "Drag a box here"} </div> );