JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<div class="move" style="width:800px; height:800px;"></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);
});