JSFiddle - React, Tailwind, and code Playground

by kailash19

HTML

<div class="container">

    <div id="screen">
        <img src="http://www.freeimagehosting.net/newuploads/ve8z4.jpg" class="drag-image" id="draggable"/>
    </div>
    <div id="bg">
        <img src="http://www.freeimagehosting.net/newuploads/rujtk.png"/>
    </div>

</div>

CSS

.container {
    margin-top: 50px;
    cursor:move;
}
#bg, #bg > img{
    position:absolute;
    left:0px;
    top:0px;
    
}
#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 });
        }
    }

});
    
$("#bg").mousedown(function(event){
    $("#draggable").trigger(event);
});   
});