JSFiddle - React, Tailwind, and code Playground

HTML

<div id="appleLogo"></div>
<div id="frameBorder">
    <div id="draggableHelper" style="display:inline-block">
        <img id="image" src="http://www.extremewebdesigners.com/blog/wp-content/uploads/2010/01/google-logo-transparent.png" />
    </div>
</div>

CSS

#appleLogo {
    position: absolute;
    width: 400px;
    height: 400px;
    background-image: url(http://wbridgewaterschools.org/school/images/Apple%20logo.png);
    background-size: cover;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index: 10;
    
}
#frameBorder {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #F00;
    overflow: hidden;
    z-index: 9;  
    background-image:100% 100%;
}
img{
    background:red;
}

JavaScript

$('#image').resizable();
$('#draggableHelper').draggable({
    containment: "#frameBorder",
	scroll: false
});

$('#appleLogo').on('mousedown', function(event){
    var gxstart = $('#image').offset().left;
    var gxend = $('#image').offset().left + $('#image').width();
    var gystart = $('#image').offset().top;
    var gyend = $('#image').offset().top + $('#image').height();  
    
  
    
    var mouseX = event.clientX;
    var mouseY =event.clientY;
    
   
    
    if( gxstart < mouseX )
    {
        if ( mouseX < gxend )
        {
            if(gystart < mouseY)
            {
                if(mouseY < gyend)
                {   
                    $('#draggableHelper').trigger(event);
                }
            }
        }
    }

    
});