JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<div id="containerDiv">drag me</div>

CSS

#containerDiv {
    background:#333;
    position:absolute;
    width:200px;
    height:100px;
    cursor:move ;
    line-height:100px;
    text-align:center;
    color:#fff;
    border:#aaa 1px solid;
}
#containerDiv.movable {
    background:#ef0;
    color:#444;
    border:#000 1px solid;
}

JavaScript

function endMove() {
    $(this).removeClass('movable');
}
function startMove() {
    $('.movable').on('mousemove', function(event) {
        var thisX = event.pageX - $(this).width() / 2,
            thisY = event.pageY - $(this).height() / 2;

        $('.movable').offset({
            left: thisX,
            top: thisY
        });
    });
}
$(document).ready(function() {
    $("#containerDiv").on('mousedown', function() {
        $(this).addClass('movable');
        startMove();
    }).on('mouseup', function() {
        $(this).removeClass('movable');
        endMove();
    });

});