JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.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

offsetLeft = $('#outerdiv').offset().left;
offsetTop = $('#outerdiv').offset().top;
blockWidth = $('#outerdiv').width();
blockHeight = $('#outerdiv').height();
imgWidth = $('#imgdrag').width();
imgHeight = $('#imgdrag').height();

x1 = offsetLeft + blockWidth - imgWidth;
y1 = offsetTop + blockHeight - imgHeight;
x2 = offsetLeft;
y2 = offsetTop;

console.log(x1);
console.log(y1);
console.log(x2);
console.log(y2);

$('#imgdrag').draggable({
    containment: [x1,y1,x2,y2]
    /*containment: [-163,-41,32,28],
    drag: function(event,ui){
        console.log($('#imgdrag').position());   
    }*/
});