title: Pass class through drag and drop data transfer
body: <p>I have an application that has multiple &quot;widgets&quot; that can be dragged and dropped onto the widget preview. Each widget has its own class and I am looking for a way to pass these classes into the drag and drop events.</p>
  <p>Currently on the dragstart event I am passing the <code>typeof</code> the widget class and converting it to a string:</p>
  <pre class="lang-js prettyprint-override"><code>const addWidget = (widgetType) =&gt; {
      // widgetBox is the box dragged onto the widget preview to specify the user wants to create this widget
      const widgetBox = document.createElement(&quot;div&quot;);
      // style widgetBox
      
      widgetBox.addEventListener(&quot;dragstart&quot;, (e) =&gt; {
          e.dataTransfer.setData(&quot;widget-type&quot;, String(widgetType));
      })
  }
  
  addWidget(TextboxWidget); // TextboxWidget is a class
  </code></pre>
  <p>On the drop event in the widget preview I then get the widget type string and am forced to manually check for each widget, which is not ideal:</p>
  <pre class="lang-js prettyprint-override"><code>element.addEventListener(&quot;drop&quot;, () =&gt; {
      e.preventDefault();
      const widgetType = e.dataTransfer.getData(&quot;widget-type&quot;);
  
      switch(widgetType) {
          case String(TextboxWidget):
              widget = new TextboxWidget();
              break;
          // etc for each widget
          default:
              return;
      }
  })
  </code></pre>
  <p>Ideally I would like to be able to pass the widget class to the drop event, and then be able to create an instance of it like so:</p>
  <pre class="lang-js prettyprint-override"><code>// dragover
  
  const addWidget = (widget) =&gt; {
      const widgetBox = document.createElement(&quot;div&quot;);
  
      widgetBox.addEventListener(&quot;dragstart&quot;, (e) =&gt; {
          e.dataTransfer.setData(&quot;widget&quot;, widget);
      })
  }
  
  addWidget(TextboxWidget);
  
  // drop
  element.addEventListener(&quot;drop&quot;, () =&gt; {
      e.preventDefault();
      const WidgetClass = e.dataTransfer.getData(&quot;widget&quot;);
      const widgetInstance = new WidgetClass();
  </code></pre>