JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <div id="screen">
        <img src="http://www.gettyimages.in/detail/photo/son-pulling-father-in-autumn-park-royalty-free-image/598523301" class="drag-image" id="draggable"/>
    </div>
    <div id="bg">
        <img src="https://www.gettyimages.in/detail/photo/man-attempting-to-pull-his-desk-outdoors-with-a-royalty-free-image/182055968"/>
    </div>

</div>

CSS

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

JavaScript

$(function() {
   //$('#draggable').draggable({ containment: '.container', scroll: false , revert: 'invalid', cursor:'move'});  
    //$("#draggable").draggable();
$("#draggable").draggable({

    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 });
        }
    }

});
});