JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bluebox" style="width:100px;height:100px;background-color:blue;position:absolute;left:300px;top:300px;"></div>

JavaScript

var startDownX, startDownY;
$(document).ready(function() {
    
    /* Stop default Firefox etc. drag */
    $(document).bind("dragstart", function() {
         return false;
    });

    /* Capture start of flings */
    $('#bluebox').mousedown(function (event) {
        startDownX = event.pageX;
        startDownY = event.pageY;
    });
        
    /* Work out fling direction on end of fling */
    $(document).mouseup(function(event){
       
        var rise = -(event.pageY - startDownY); /* Page Origin is different from graph */
        var run = event.pageX - startDownX;
        var newX = $('#bluebox').position().left;
        var newY = $('#bluebox').position().top;
        var distanceToFling = 100;

        if (run == 0 || Math.abs(rise/run) > 3) {
            if (rise > 0) {
              newY -= distanceToFling;
            } else if (rise < 0) {
              newY += distanceToFling;
            }
        }
        else {
            if (run > 0) {
                newX += distanceToFling;
                newY -= (rise/run) * distanceToFling;
            }
            else {
                newX -= distanceToFling;
                newY += (rise/run) * distanceToFling;
            }
        }
       
         $('#bluebox').animate({
             left: newX,
             top: newY
            }, 1000);
    });
});