Tengo un cajón (panel lateral) que se abre para mostrar un conjunto de 'tipos de widgets'. La idea es que pueda arrastrar estos tipos de widgets fuera del cajón y soltarlos en una cuadrícula como el tipo de widget que representan. Quiero poder cerrar el cajón cuando comience el arrastre y luego volver a abrirlo después de haber dejado de arrastrar (dejar caer el elemento). Cada uno de los tipos de widgets en el cajón es una tarjeta envuelta en un 'contenedor arrastrable'. La implementación de este contenedor se muestra a continuación:

 const DraggableContainer = ({ children, widgetType, onDragEnd, onDragStart }: Props) => { // ----- Return Component ----- return ( <div className="droppable-element" draggable={true} unselectable="on" // this is a hack for firefox // Firefox requires some kind of initialization // which we can do by adding this attribute // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313 onDragStart={(e) => { e.dataTransfer.setData('text/plain', ''); e.dataTransfer.setData('widgetType', widgetType); onDragStart && onDragStart(); }} onDragEnd={(e) => { console.log('ended drag'); onDragEnd && onDragEnd(); }} > {children} </div> ); };

Tengo el problema de que cuando el cajón se cierra, el contenedor que se puede arrastrar se pierde y, aunque se suelta, funciona bien, no se llama al controlador onDragEnd . ¿Cómo puedo conservar el controlador de eventos onDragEnd?

He adjuntado un gif que muestra el comportamiento que he descrito anteriormente. Después de soltar, el cajón debería volver a abrirse a través de la devolución de llamada onDragEnd().