JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="outerdiv">
    <img id="imgdrag" src="http://www.testedich.de/quiz24/picture/pic_1199587011_11.jpg" />
</div>

CSS

#outerdiv {
    width: 200px;
    height: 200px;
    background-color: red;
    overflow: hidden;
    margin-top: 50px;
    margin-left: 50px;
    background-color: red;  
    -moz-transform: rotate(10deg);
    -webkit-transform:rotate(10deg);
}

JavaScript

$("#imgdrag").draggable({
    drag : function(e,ui){
        blockWidth = $('#outerdiv').width();
        blockHeight = $('#outerdiv').height();
        imgWidth = $('#imgdrag').width();
        imgHeight = $('#imgdrag').height();
        leftBounder = ui.position.left;
        topBounder = ui.position.top;
        rightBounder = blockWidth - imgWidth;
        bottomBounder = blockHeight - imgHeight;
        
              
        if(ui.position.top > 0) { ui.position.top = 0; }
        if(ui.position.left > 0) { ui.position.left = 0; }   
        if(topBounder < bottomBounder) {
            ui.position.top = bottomBounder;
        }
        if(leftBounder < rightBounder) {
            ui.position.left = rightBounder;
        }
    }
});