JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div class="main">
    <div class="bg"></div>
    <a href="javascript://" id="handle"></a>
</div>

CSS

.main{height:300px;width:300px;}
.bg{background:#aaa;height:100%;width:100%;}
#handle{position:relative;bottom:30px;right:0px;background-color:#4f4;height:30px;width:30px;display:block;float:right;cursor:-webkit-grab;}

JavaScript

$(document).ready(function(){
    $("#handle").bind("mousedown",function(){
        $("*").bind("mousemove",function(e){
            var X = e.pageX;
            var Y = e.pageY;
            console.log(X+" || "+Y);
        });
        $("*").bind("mouseup",function(){
            $("*").unbind("mousemove");
            $("*").unbind("mouseup");
        });
    });
})