JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <img id="triangle" alt="" src="http://fiddle.jshell.net/img/logo.png" />
</body>

CSS

body {background:lightblue;}
#triangle {cursor:pointer;}

JavaScript

$(window).on('load',function(){
//VARS===================================================
    var activeImg = null;
    var moving = false;
//cursor&img positions
    var cursorStartX;
    var cursorStartY;
    var imgStartLeft;
    var imgStartTop;
    
//DRAG===================================================
//DRAG START---------------------------------------------
    $('#triangle').mousedown(function(e) {
        e.preventDefault();
        
        //create matching canvas for the image
        if(!this.canvas) {
            this.canvas = $('<canvas/>')[0];
            this.canvas.width = this.width;
            this.canvas.height = this.height;
            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
        }
        var pixelData = this.canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
        
        //check that the pixel is not transparent
        if (pixelData[3] > 0) {
            activeImg = this;
            
            //save starting positions of cursor and image
            cursorStartX = e.pageX;
            cursorStartY = e.pageY;
            imgStartLeft = $(this).offset().left;
            imgStartTop = $(this).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
            });
        }
    });
//DRAG STOP----------------------------------------------
    $(document).mouseup(function(){
        moving = false;
        activeImg = null;
    });
});