JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable" draggable="true"
        ondragstart="event.dataTransfer.setData('text/plain',null)">
        Drag me </div>

<div class="dropzone">Test dropzone</div>

<iframe id="dropframe" srcdoc='<div class="dropzone2" style="height:300px; width:300px;">Test iframe dropzone</div>'></iframe>

JavaScript

var dragged;
    //var dragged2;
    var iFrame = document.getElementById("dropframe");
    var iFrameWindow = iFrame.contentWindow;
    
    iFrame.addEventListener("load", function(event) {
    	iFrameWindow.document.body.addEventListener('dragstart', function(event) {
      	event.preventDefault();
      });
    	iFrameWindow.document.body.addEventListener('dragenter', function(event) {
      	event.preventDefault();
      	//dragged2 = event.target;
      });
    	iFrameWindow.document.body.addEventListener('dragover', function(event) {
      	event.preventDefault();
      });
    	iFrameWindow.document.body.addEventListener('drop', function(event) {
      	event.preventDefault();
        //console.log(dragged2);
        if (event.target.className == "dropzone2") {
        	console.log('drop event');
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(dragged);
        }
      });
    });

    /* events fired on the draggable target */
    document.addEventListener("drag", function(event) {

    }, false);

    document.addEventListener("dragstart", function(event) {
        dragged = event.target;
    }, false);

    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    }, false);

    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if (event.target.className == "dropzone") {
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(dragged);
        }
    }, false);