JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="imgMove">
    <img  id="moved" src="http://img2.goodfon.ru/original/6458x3301/7/19/priroda-peyzazh-gory-derevya-942.jpg">
</div>

CSS

#imgMove{
    outline:1px solid #F00;
    width:500px;
    height:500px;
    overflow:hidden;
    position:absolute;
    -webkit-user-select: none;
    -moz-user-select:none ;
    -ms-user-select: none;
    user-select:none ;
}
#moved{
    -webkit-user-select: none;
    -moz-user-select:none ;
    -ms-user-select: none;
    user-select:none ;
    position:absolute;
    left:0;
    top:0;
}
#imgMove:active{
    cursor:move;
}

JavaScript

var imgMover = {press: false, offX:0, offY:0,x0:0,y0:0,x1:0,y1:0};
$("#imgMove").bind("mousedown",function(e){
    imgMover.x0 = e.clientX;
    imgMover.y0 = e.clientY;
    imgMover.press = true;
    e.preventDefault();
});
$(window).bind("mousemove",function(e){
    if(!imgMover.press)
        return false;
    imgMover.x1 = imgMover.x0;
    imgMover.y1 = imgMover.y0;
    imgMover.x0 = e.clientX;
    imgMover.y0 = e.clientY;
    var offx = parseInt($("#moved").position().left) + parseInt(imgMover.x0 - imgMover.x1);
    var offy = parseInt($("#moved").position().top) + parseInt(imgMover.y0 - imgMover.y1);
    $("#moved").css({
        "left": offx,
        "top": offy
    });
    if($("#moved").position().top>0)
        $("#moved").css({"top":0});
    if($("#moved").position().left>0)
        $("#moved").css({"left":0});
    if($("#moved").position().top < -($("#moved").height() - $("#imgMove").height()))
        $("#moved").css({"top":-($("#moved").height() - $("#imgMove").height())});
    if($("#moved").position().left < -($("#moved").width() - $("#imgMove").width()))
        $("#moved").css({"left":-($("#moved").width() - $("#imgMove").width())});
});
$(window).bind("mouseup",function(){
    imgMover.press = false;    
});