JSFiddle - React, Tailwind, and code Playground

HTML

<span id="spnCursor"></span>
<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer{
    width:100px; 
    height:100px;
    background: red;
    margin: 150px;
    overflow: hiden;
    position: relative;
}
#inner{
    width:240px; 
    height:140px;
    background:yellow;
    position: relative;
    opacity: 0.5;
}

JavaScript

$(document).ready(function(){        
    $(document).mousemove(function(e){           
        $('#spnCursor').html(e.pageX + "-" + e.pageY);        
    });
});

var i = $('#inner');
var o = $('#outer');
var x = 0;
var y = 0;
var offset = o.offset();
$('#inner').html(i.position().top+' - '+i.position().left);
i.draggable({
    drag: function(ui, event) {
        var position = i.position();
        
        i.html(position.left+' - '+position.top);
        if (position.top <= 1-(i.height()-o.height())) {   
            i.css('background', 'red');
        }
        else if (position.left >= -1) {          
             i.css('background', 'gray');
        }
        else if (position.left <= o.width()-i.width()+1) {

             i.css('background', 'green');
        }
        else if (position.top >= -1) {
 
              i.css('background', 'cyan');
        }                    
    },
    start: function () {
        var offset = o.offset();
        i.draggable('option', 'containment', [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]);
    },
    containment: [offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top]
});
console.log([offset.left + o.width()-i.width(), offset.top + o.height() - i.height(), offset.left, offset.top])