JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div id='test'>Test</div>

JavaScript

var x, y;

$("#test").draggable({
    start: function(event) {
        console.log(event);
        x = event.originalEvent.pageX;
        y = event.originalEvent.pageY;
        console.log(x, y);
    }, 
    drag: function(event) {
        if (x && y) {
            axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
            $("#test").draggable('option', 'axis', axis);
            x = y = null;
        }        
    },
    stop: function() {
        x = y = null;
        $("#test").draggable('option', 'axis', false);
    },
    distance: 20
});