JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="drag dragx">Drag me X</div>
</div>
<div class="parent">
    <div class="drag dragy">Drag me Y</div>
</div>
<div class="parent">
    <div class="drag dragxy">Drag me anywhere</div>
</div>

CSS

* {
    font-family:arial, tahoma, sans-serif
}
.parent {
    width:200px;
    height:200px;
    background:yellow;
    float:left;
    margin:10px;
}
.drag {
    background:#eee;
    width:50px;
    height:50px;
    border:1px solid #ccc;
    z-index:1;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    font-size:12px;
    color:white;
}
.dragx {
    background:red;
}
.dragy {
    background:green;
}
.dragxy {
    background:blue;
}

JavaScript

// Draggable Plugin
$.fn.draggable=function(e){var t=this;var n={handle:"",cursor:"move",axis:null,containParent:false};e=$.extend(n,e);if(e.handle===""){var r=t}else{var r=t.find(e.handle)}return r.css("cursor",e.cursor).on("mousedown",function(t){if(e.handle===""){var n=$(this).addClass("draggable")}else{var n=$(this).addClass("active-handle").parent().addClass("draggable")}var i=n.css("z-index"),s=n.outerHeight(),o=n.outerWidth(),u=n.offset().top+s-t.pageY,a=n.offset().left+o-t.pageX;var f=$(this).parent();var l=f.width(),c=f.height();var h=parseInt(f.offset().left)+parseInt(f.css("padding-left").replace("px","")),p=h+l,d=parseInt(f.offset().top)+parseInt(f.css("padding-top").replace("px","")),v=d+c;n.css("z-index",1e3).parents().on("mousemove",function(t){var f=t.pageY+u-s,l=t.pageX+a-o,c=null;if(e.containParent===true){if(l<h)l=h;if(l>p-o)l=p-o;if(f<d)f=d;if(f>v-s)f=v-s}if(e.axis=="x"){c={left:l}}else if(e.axis=="y"){c={top:f}}else{c={left:l,top:f}}$(".draggable").offset(c);$(".draggable, html").on("mouseup",function(){n.parents().off("mousemove");$(r).removeClass("draggable").css("z-index",i)})});t.preventDefault()}).on("mouseup",function(){if(e.handle===""){$(this).removeClass("draggable")}else{$(this).removeClass("active-handle").parent().removeClass("draggable")}r.off("mousedown",function(e){e.preventDefault()})})}



$(document).ready(function () {
    $('.dragx').draggable({
        containParent: true,
        axis: 'x'
    });

    $('.dragy').draggable({
        containParent: true,
        axis: 'y'
    });

    $('.dragxy').draggable({
        containParent: true
    });

});