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) {
    var j = JSON.stringify(foo);
    e.originalEvent.dataTransfer.setData("foo", j);
});

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