JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo">
    
    <div id="draggable2" class="draggable ui-widget-content"> 
        <p>I can be dragged only horizontally</p> 
    </div> 
</div>

CSS

.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2 { margin-bottom:20px; }
#draggable { cursor: n-resize; }
#draggable2 { cursor: e-resize; }
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }

JavaScript

var start,stop;

$("#draggable2").draggable({
    axis: "x",
    start: function(event, ui) {
        start = ui.position.left;
    },
    stop: function(event, ui) {
        stop = ui.position.left;
        alert('has moved ' + ((start < stop) ? 'rigth':'left'))
    }
});