JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <div id="screen">
        <img src="http://www.kidsmathgamesonline.com/images/pictures/shapes/rectangle.jpg" class="drag-image" id="draggable"/>
    </div>
    <div id="bg">
        <img src="https://media.gettyimages.com/photos/catherine-duchess-of-cambridge-and-meghan-duchess-of-sussex-attend-picture-id998540858"/>
    </div>

</div>

CSS

.container {
    margin-top: 50px;
}
.drag-image{
}
#bg, #bg > img{
    position:absolute;
    left:0px;
    top:0px;
}
#screen {
    overflow:hidden;
    left:150px;
    top:150px;
    width:300px;
    height:300px;
    clear:both;
    border:1px solid black;
    position:absolute;
    z-index:-1;
}

JavaScript

$(document).click(function(e) {
    console.log(e.pageX, e.pageY)
});
$(function() {
    //$('#draggable').draggable({ containment: '.container', scroll: false , revert: 'invalid', cursor:'move'});  
    //$("#draggable").draggable();

    function intersects(x, y, cx, cy, r) {
        var dx = x - cx
        var dy = y - cy
        return dx * dx + dy * dy <= r * r
    }

    $("#draggable").draggable({
        start: function(e) {
            if(!intersects(e.pageX,e.pageY,300,300,130)){
            $(document).trigger("mouseup")
            }
        },
        stop: function(ev, ui) {
            var hel = ui.helper,
                pos = ui.position;
            //horizontal
            var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
            if (pos.top >= 0) {
                hel.animate({
                    top: 0
                });
            } else if (pos.top <= h) {
                hel.animate({
                    top: h
                });

            }
            // vertical
            var v = -(hel.outerWidth() - $(hel).parent().outerWidth());
            if (pos.left >= 0) {
                hel.animate({
                    left: 0
                });
            } else if (pos.left <= v) {
                hel.animate({
                    left: v
                });
            }
        }

    });
    $("#bg").mousedown(function(event){
    $("#draggable").trigger(event);
}); 
});