JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<html>
  <head>
    <script>

      function dodrop(event)
      {
        var dt = event.dataTransfer;
        var count = dt.mozItemCount;
        output("Items: " + count + "\n");

        for (var i = 0; i < count; i++) {
          output(" Item " + i + ":\n");
          var types = dt.mozTypesAt(i);
          for (var t = 0; t < types.length; t++) {
            output("  " + types[t] + ": ");
            try {
              var data = dt.mozGetDataAt(types[t], i);
              output("(" + (typeof data) + ") : <" + data + " >\n");
            } catch (ex) {
              output("<<error>>\n");
              dump(ex);
            }
          }
        }
      }

      function output(text)
      {
        document.getElementById("output").textContent += text;
        dump(text);
      }

    </script>
  </head>
  <body>

    <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;"
         ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
         ondragover="event.stopPropagation(); event.preventDefault();"
         ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);">

      <div>

        Fix</div>
    </div>

  </body>
</html>