JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id" contenteditable="true">
    <b>1)</b> Select this text<br />
    <b>2)</b> drag it around<br />
    <b>3)</b> Note the caret moving with the mouse, thus highlighting the inclusion target<br />
    <br />
    <b>4)</b> Now select the URL of this page in the navigation bar<br />
    <b>5)</b> drag it ever here<br />
    <b>6)</b> Note that caret is NOT moved with the mouse, as this part of the page is in an INACTIVE iframe. So, the caret is only visible if the window (or iframe) is active<br />
</div><br />
<br />
<b>Question:</b> Can you make it visible in the second case without using a helper "caret"?

JavaScript

$(function() {
    if(typeof document.caretRangeFromPoint !== 'function') {
        alert('This fiddle is only designed for Chrome');
    };
    
    // Needed to be able to catch 'drop' event
    $('#id').on('dragover', function(e) {
        e.preventDefault();
        
        // Make sure the method 'caretRangeFromPoint' is defined
        if(typeof document.caretRangeFromPoint === 'function') {
            var pos = document.caretRangeFromPoint(e.originalEvent.clientX, e.originalEvent.clientY);
            console.log('x:'+e.originalEvent.clientX+' y:'+e.originalEvent.clientY);
            // Invalid coordinates for a caret
            if(pos === null) {
                return false;
            }
            
            var selection = document.getSelection();
            selection.removeAllRanges();
            
            var range = document.createRange();
            range.setStart(pos.startContainer, pos.startOffset);
            
            // Is a valid area dropped?
            $editable = $(pos.commonAncestorContainer.parentElement).closest('[contenteditable="true"]');
            
            // We are over a non-editable area?
            if( ! $editable.length) {
                return false;
            }
            
            range.collapse();
            selection.addRange(range);
        }
        
        return false;
    });
    
    // Catch the drop event
    $('#id').on('drop', function(e) {
        e.preventDefault();
        alert('mmm, delicious');
        return false;
    });
});