JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

CSS

#draggable { width: 100%; height: 150px; padding: 0.5em; }

JavaScript

var x1=x2=y1=y2=0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,
    axis: 'y',
    drag: function (e, ui){
        y2 = ui.position.top;
        x2 = ui.position.left;
        dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
        
            ui.position.top = ui.position.top * (1 - (dist / 1000));

        
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
        
    }
});