JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    DataTransport via Text:
    <a class="text" draggable="true">Drag me</a>
<div>
    DataTransport via JSON:
    <a class="json" draggable="true">Drag me</a>
</div>
    
<textarea class="secret" placeholder="Data to be transported">This is a secret</textarea>
<div class="droparea"></div>

CSS

.droparea {
    border: 1px dotted black;
    min-height: 200px;
    width: 400px;
}
.droparea:-mox-drag-over {
    border-width: 2px;
}
[draggable] {
    display: inline-block;
    border: 1px solid black;
    background: #CCC;
    padding: 5px;
}

[draggable].dragged {
    opacity: 0.4;
}

JavaScript

$("[draggable]")
    .on("dragstart", function () {
        $(this).addClass("dragged");
    })
    .on("dragend", function () {
        $(this).removeClass("dragged");
    })
    .on("dragstart", function (event) {
        console.log(event);
        var transfer = event.originalEvent.dataTransfer,
            secret = $(".secret").val();

        if ($(this).is(".text")) transfer.setData("text", secret);

        if ($(this).is(".json")) transfer.setData("application/json", JSON.stringify({
            content: secret
        }));
});

$(".droparea").on("drop", function (event) {
    console.log(event);
    var transfer = event.originalEvent.dataTransfer,
        json = transfer.getData("application/json"),
        text = transfer.getData("text"),
        droparea = this;

    function add(label, text) {
        $("<p>").text(text).prepend("<strong>" + label + ":</strong> ").appendTo(droparea);
    }

    if (json) add("Received JSON", JSON.parse(json).content);
    else if (text) add("Reveived TEXT", text);
    else add("ERROR", "No data received");

    event.preventDefault();
}).on("dragover", function (event) {
    event.preventDefault();
});