JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info"></div>
<div id="insertionCaret"></div>

<div style="margin-top:50px;">
    <input id="useCaret" type="checkbox" checked="checked" /> <label for="useCaret">Use Insertion Feedback</label>
</div>

<div class="col" id="leftCol">
    This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. This is a <u>column</u> which can be dragged I'm pretty sure. You should test it out just in case I'm lying. This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. <b>This is a column</b> which can be dragged I'm pretty sure.
</div>
<div class="col" id="rightCol">
    This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. <i>This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. This is a column which can be dragged I'm pretty sure.</i> You should test it out just in case I'm lying. This is a column which can be dragged I'm pretty sure. You should test it out just in case I'm lying. 
</div>

CSS

.col {
    display:inline-block;
    width:35%;
    margin:5%;
    vertical-align:top;
}
#insertionCaret {
    position:absolute;
    top:5px;
    left:5px;
    background:rgba(0,100,200,0.8);
    width:2px;
    height:50px;
    display:none;
}

#info {
    position:absolute;
    background:white;
    top:0;
    font-family:monospace;
}

JavaScript

var displayInfo = function(target, event) {
    $("#info").html(
        "target-id: " + target + "<br />" +
        "event:     " + event );
}
    
$(function() {
    
    $("#insertionCaret").each(function(ix,el) {
        $(el).on("dragenter dragover drop", function(evt) {
            displayInfo(evt.target.id, evt.type);

            // Attempt to "opt out" of this event
            //evt.originalEvent.cancelBubble = true;
            //evt.originalEvent.preventDefault();
        });
    });
    
    $(".col").each(function(ix,el) {
        el.draggable = true;
        $el = $(el);
        
        $el.on("dragstart dragenter dragend dragover", function(evt) {
            displayInfo(evt.target.id, evt.type);
        });
        
        $el.on("dragenter", function(evt) {
            if ($("#useCaret")[0].checked) {
                $("#insertionCaret")
                .show()
                .css("width", $(evt.target).width())
                .css("height", $(evt.target).height())
                .css("left", $(evt.target).offset().left)
                .css("top", $(evt.target).offset().top);
            }
        });
            
        $el.on("dragend", function(evt) {
            $("#insertionCaret").hide();
        });
            
    });
    
});