JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable"></div>

<div id="clickmegood">good one</div>
<div id="clickmebad">bad one</div>
<div id="dragoverhere">drag over here</div>

CSS

#draggable{
    display:none;
    position:absolute; 
    width:100px; 
    height:100px; 
    background-color: #FF0000; 
    z-index: 99999; 
    opacity: 0.3;
    pointer-events:none;
}

#clickmegood{
    display:block;
    position: absolute; 
    height:20px; 
    width:80px; 
    text-align: center;
    border: 1px solid black;
    top: 10px;
    left: 10px;
}

#clickmebad{
    display:block;
    position: absolute;
    height:20px;
    width:80px;
    text-align: center;
    border: 1px solid black;
    top: 10px;
    left: 100px;
}

#dragoverhere{
    position: absolute; 
    top:200px; 
    left: 100px;
    display:block; 
    height:100px; 
    width:100px; 
    border: 1px solid red;
    vertical-align: middle;
    line-height: 100px;
    text-align: center;
}

JavaScript

$("#clickmegood").click(function(e) {
    e.stopPropagation();
    $(document).unbind("mousemove").mousemove(function(ev) {
        $("#draggable").css({
            left: ev.pageX + 5 + 'px',
            top: ev.pageY + 5 + 'px'
        });
    });
    $("#draggable").show();
});

$("#clickmebad").click(function(e) {
    e.stopPropagation();
    $(document).unbind("mousemove").mousemove(function(ev) {
        $("#draggable").css({
            left: ev.pageX - 20 + 'px',
            top: ev.pageY - 20 + 'px'
        });
    });
    $("#draggable").show();
});

$("#dragoverhere").hover(function() {
    if ($("#draggable").is(":visible")) {
        $(this).css("border", "1px dotted green");
    }
}, function() {
    $(this).css("border", "");
});

$(document).click(function() {
    $(document).unbind("mousemove");
    $("#draggable").hide();
})