JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragarea">
    <div class='draggable'>Draggable</div>
    <div class="droppable">Droppable</div>
</div>

CSS

body {
    width:100%;
    height:400px;  
}
.dragarea {
    width:100%;
    height:100%;
    background:#F1f1f1;
}

.draggable,
.droppable {
    border:1px solid #333333;
    width:100px;
    height:100px;
    background:#304050;
    text-align:center;
    line-height:100px;
    color:#FFFFFF;
}

.draggable {
    position:fixed;
    z-index: 10;  
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

var dragging = undefined;

$('.draggable').on('mousedown', function(){
    dragging = $(this);
});

$('body').on('mousemove', function(e){
    if(typeof dragging != "undefined") {
        dragging.css({
             top : e.pageY - 50,
             left : e.pageX - 50
        });       
    }
});

$('body').on('mouseup', function(){
    dragging = undefined;
});