JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h4 style="color:red">Drag Me</h4>
<div style="border: 1px solid;" contenteditable="true">Drop here</div>
</body>

JavaScript

$("div[contenteditable=true]").on('drop', function(e) {
    e.preventDefault();
    var text = e.originalEvent.dataTransfer.types.indexOf && e.originalEvent.dataTransfer.types.indexOf('text/plain') >= 0 ? e.originalEvent.dataTransfer.getData('text/plain') :  e.originalEvent.dataTransfer.getData('Text');
    var range;
    if (!document.caretRangeFromPoint) { // IE11 doesn't support caretRangeFromPoint
        range = document.createRange();
        range.setStart(e.currentTarget, 0);
        range.setEnd(e.currentTarget, 0);
    } else {
        range = document.caretRangeFromPoint(e.originalEvent.clientX, e.originalEvent.clientY);
    }
    _insertText(text, range);
});

function _insertText(text, range) { 
    range.deleteContents();
    var textNode = document.createTextNode(text);
    range.insertNode(textNode);
    range.selectNodeContents(textNode);
    range.collapse(false);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
};