JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div class="move" style="width:8000px; height:8000px;"></div>

CSS

.move {
    background: red;
    width: 100px;
    height: 100px;
}
.Move {
    background: blue;
    width: 100px;
    height: 100px;
}

JavaScript

function DragMe(e) {
    var relativeXPosition = (e.pageX - this.offsetLeft);
    var relativeYPosition = (e.pageY - this.offsetTop);

    $(document).on('mousemove', function (e) {
        $('.move').offset({
            top: e.pageY - relativeYPosition,
            left: e.pageX - relativeXPosition,
        });
    });
};

$('.move').on('mousedown', DragMe);

$('.move').mouseup(function () {
    $(this).off('mousedown');
    $(document).off('mousemove');
    $('.move').on('mousedown', DragMe);
});