JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="frame">
</iframe>
<div id="blue" style="width: 50px; height: 50px; background-color: blue; color: white;" draggable="true">drag me</div>
<br/><br/><br/>

JavaScript

$frame = $("#frame");
$blue = $("#blue");
$red = $('<div id="red" style="width: 100px; height: 100px; background-color: red; color: white;">dropzone</div>');
$frame.contents().find("body").html($red);

var foo = {foo: "foo", bar: "bar"};

$blue.on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("foo", foo);
});

$red.on("dragenter", function(e) { e.preventDefault(); });
$red.on("dragover", function(e) { e.preventDefault(); });
$red.on("drop", function(e) {
    console.log("foo is:",e.originalEvent.dataTransfer.getData("foo"));
});