Tengo una aplicación que tiene varios "widgets" que se pueden arrastrar y soltar en la vista previa del widget. Cada widget tiene su propia clase y estoy buscando una manera de pasar estas clases a los eventos de arrastrar y soltar.

Actualmente, en el evento typeof , paso el tipo de la clase de widget y lo convierto en una cadena:

 const addWidget = (widgetType) => { // widgetBox is the box dragged onto the widget preview to specify the user wants to create this widget const widgetBox = document.createElement("div"); // style widgetBox widgetBox.addEventListener("dragstart", (e) => { e.dataTransfer.setData("widget-type", String(widgetType)); }) } addWidget(TextboxWidget); // TextboxWidget is a class

En el evento de caída en la vista previa del widget, obtengo la cadena de tipo de widget y me veo obligado a verificar manualmente cada widget, lo cual no es ideal:

 element.addEventListener("drop", () => { e.preventDefault(); const widgetType = e.dataTransfer.getData("widget-type"); switch(widgetType) { case String(TextboxWidget): widget = new TextboxWidget(); break; // etc for each widget default: return; } })

Idealmente, me gustaría poder pasar la clase de widget al evento de soltar y luego poder crear una instancia de este modo:

 // dragover const addWidget = (widget) => { const widgetBox = document.createElement("div"); widgetBox.addEventListener("dragstart", (e) => { e.dataTransfer.setData("widget", widget); }) } addWidget(TextboxWidget); // drop element.addEventListener("drop", () => { e.preventDefault(); const WidgetClass = e.dataTransfer.getData("widget"); const widgetInstance = new WidgetClass();