JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="mouseEvent"></div><span id="txt"></span>

CSS

div{
    top:0px;
    left:0px;
    height:500px;
    width:500px;
    border:1px solid;
    float:left;
}

JavaScript

var down = false;
pos = {
    x: '',
    y: ''
};
$("#mouseEvent").mousedown(function(e) {
    down = true;
    pos.x = e.pageX;
    pos.y = e.pageY;
});
$("#mouseEvent").mousemove(function(e) {
    if (down) {
        dist = (Math.sqrt(((e.pageX - pos.x) * (e.pageX - pos.x)) + ((e.pageY - pos.y) * (e.pageY - pos.y))));
        if (pos.x < e.pageX) {
            $("#txt").html("swiping right<br />Threshold : " + dist);
        } else {
            $("#txt").html("swiping left<br />Threshold : " + dist);
        }
    }
});
$("#mouseEvent").mouseup(function(e) {
    down = false;
});