JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor" contenteditable="true">
    Testime siinkohal seda, et kuidas<br />
    on võimalik asja testida.
    <span class="draggable" draggable="true" contenteditable="false">Token</span>
</div>
<span class="draggable" draggable="true" contenteditable="false">Token 2</span>

CSS

#editor {
    border: 2px solid red;
    padding: 5px;
}
.draggable {
    display: inline-block;
    padding: 3px;
    background: yellow;
    cursor: move !important;
}

JavaScript

var bindDraggables = function() {
    console.log('binding draggables', $('.draggable').length);
    $('.draggable').off('dragstart').on('dragstart', function(e) {
        if (!e.target.id)
            e.target.id = (new Date()).getTime();
        e.originalEvent.dataTransfer.setData('text/html', e.target.outerHTML);
        console.log('started dragging');
        $(e.target).addClass('dragged');
    });
}

$('#editor').on('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#editor').on('drop', function(e) {
    e.preventDefault();
    var e = e.originalEvent;
    var content = e.dataTransfer.getData('text/html');
    var range = null;
	if (document.caretRangeFromPoint) { // Chrome
		range = document.caretRangeFromPoint(e.clientX, e.clientY);
	}
	else if (e.rangeParent) { // Firefox
		range = document.createRange();
        range.setStart(e.rangeParent, e.rangeOffset);
	}
	var sel = window.getSelection();
	sel.removeAllRanges(); sel.addRange(range);
			
	$('#editor').get(0).focus(); // essential
    var spanId = 'temp-' + (new Date()).getTime();
    
    document.execCommand('insertHTML', false, '<span id="' + spanId + '">\u200b</span>');
    $('#' + spanId).replaceWith(content);
    sel.removeAllRanges();
    $('.dragged').remove();
    
    bindDraggables();
});

bindDraggables();