JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

CSS

img {
    background: linear-gradient( to left top, blue, red);
    width:200px;
    height:200px;
    margin:20px;
}

JavaScript

$('img').on('dragstart drag dragstop', function(e){
    var position = $(this).offset();
    var oe = e.originalEvent;
    if (oe.x > 0){
        var pos = (position.top + oe.y) + "px " + (position.left + oe.x) + "px";
        $(this).css("background-position", pos);
    }
});
$('img').on('mouseup', function(e){
    console.log('mouseup', e.originalEvent);
    e.stopPropagation();
    e.stopImmediatePropagation();
});