JSFiddle - React, Tailwind, and code Playground

HTML

<body onmousedown="return false">
<!--PREVIEW-->
    <div class="preview"><img src='http://www.picturesnew.com/media/images/3cc4cc5ef7.jpg' /></div>
</body>

CSS

/*IMG-----------------------------------*/
.preview img {cursor:move;}

/*DIV-----------------------------------*/
.preview {
    width:400px;
    height:200px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
    border:2px solid #AAAAAA;
    background-color:#666666;
    overflow:hidden;
}

JavaScript

$(window).on('load',function(){
//VARS===================================================
    var activeImg = null;
    var moving = false;
//cursor&img positions
    var cursorStartX;
    var cursorStartY;
    var imgStartLeft;
    var imgStartTop;
//drag boundaries
    var minDragLeft;
    var maxDragLeft;
    var minDragTop;
    var maxDragTop;
    
//CENTER IMAGE-------------------------------------------
    $('.preview img').offset({
        left: $('.preview').offset().left + $('.preview').outerWidth()/2 - $('.preview img').outerWidth()/2,
        top: $('.preview').offset().top + $('.preview').outerHeight()/2 - $('.preview img').outerHeight()/2
    });
    
//DRAG===================================================
//DRAG START---------------------------------------------
    $('.preview img').mousedown(function(e){
        e.preventDefault();
        activeImg = this;
        
        //save starting positions of cursor and image
        cursorStartX = e.pageX;
        cursorStartY = e.pageY;
        imgStartLeft = $(this).offset().left;
        imgStartTop = $(this).offset().top;
        
        //set drag boundaries
        minDragLeft = $('.preview').offset().left + $('.preview').outerWidth() - $(this).outerWidth();
        maxDragLeft = $('.preview').offset().left;
        minDragTop = $('.preview').offset().top + $('.preview').outerHeight() - $(this).outerHeight();
        maxDragTop = $('.preview').offset().top;
        
        moving = true;
    });
//DRAG MOVE----------------------------------------------
    $(document).mousemove(function(e){
        if (moving == true) {
            //update image position
            $(activeImg).offset({
                left: imgStartLeft + e.pageX-cursorStartX,
                top: imgStartTop + e.pageY-cursorStartY
            });
            //prevent dragging in prohibited areas
            if ($(activeImg).offset().left <= minDragLeft) {
                $(activeImg).offset({left:minDragLeft});
         ...