JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mask"></div>
<img src='http://www.pm-magazin.de/sites/www.pm-magazin.de/files/imagecache/lightbox/images/Viagra-Qualle.JPG' />

CSS

body {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
#mask {
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    border:1px solid #f00;
    position:absolute;
    cursor: move;
    z-index:100;
}
img {
    pointer-events:none;
    -webkit-transform:rotate(45deg);
    position:absolute;
    top:100px;
    left:100px;
}

JavaScript

$(function () {
    var mousedown = false;
    var xOffset = 0;
    var yOffset = 0;
    $('#mask').mousedown(function (e) {
        mousedown = true;
        xOffset = e.pageX - $(this).offset().left;
        yOffset = e.pageY - $(this).offset().top;
    });

    $('body').mouseup(function () {
        mousedown = false;
    });

    $('body,html').mousemove(function (e) {
        if (!mousedown) return;
        var x = e.pageX - xOffset;
        var y = e.pageY - yOffset;
        $('#mask').css('left', x);
        $('#mask').css('top', y);

        if (y < $('img').offset().top) $('#mask').css('top', $('img').offset().top);
        if (x < $('img').offset().left) $('#mask').css('left', $('img').offset().left);
        
        var x_collision = $('img').offset().left + $('img').width() - $('#mask').width();
        if (x > x_collision ) $('#mask').css('left', x_collision );
        
        var y_collision = $('img').offset().top + $('img').height() - $('#mask').height();
        if (y > y_collision ) $('#mask').css('top', y_collision );
    });
});