JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js"></script>
<div id="container">
    <img src="http://placehold.it/320&amp;text=test" />
</div>

CSS

#container {
    position: relative;
}
img {
    position: relative;
}

JavaScript

var zoom = 1,
    img = $('img');

var width = img.width(),
    height = img.height();

var offsetx = img.offset().left,
    offsety = img.offset().top;

var lastmousex, lastmousey, dragging = false;

$(window).on('mousewheel', function (event, delta) {
    event.preventDefault();
    var mousex = event.pageX;
    var mousey = event.pageY;

    var frommousex = (mousex - offsetx) / zoom;
    var frommousey = (mousey - offsety) / zoom;

    zoom += 0.2 * delta;
    zoom = Math.max(0.25, Math.min(zoom, 4));

    offsetx = mousex - frommousex * zoom;
    offsety = mousey - frommousey * zoom;

    img.stop().animate({
        top: offsety,
        left: offsetx,
        width: width * zoom,
        height: height * zoom
    }, 250);
});

$(window).on('mousedown', function () {
    event.preventDefault();

    dragging = true;
});

$(window).on('mouseup', function () {
    event.preventDefault();

    lastmousex = null;
    lastmousey = null;
    dragging = false;
});

$(window).on('mousemove', function (event, delta) {
    event.preventDefault();

    if (!dragging) {
        return;
    }

    var mousex = event.pageX;
    var mousey = event.pageY;

    if (lastmousex == null) lastmousex = mousex;
    if (lastmousey == null) lastmousey = mousey;

    var deltax = mousex - lastmousex;
    var deltay = mousey - lastmousey;

    lastmousex = mousex;
    lastmousey = mousey;

    offsetx += deltax;
    offsety += deltay;
    
    img.css({
        top: offsety,
        left: offsetx
    });
});