JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<div id="handle"></div>

CSS

#handle{
    width:20px;
    height:20px;
    outline: 1px solid red;
}

JavaScript

var makeDraggable = (function(element, onmousemoveCallback){
    var selected = false;
    var startY = null;
    var startX = null;
    
    return function(element, onmousemoveCallback){
        element.onmousedown = function(event){
            selected = true;
        };
        document.onmouseup = function(event){
            selected = false;
            startY = null;
            startX = null;
        };
        document.onmousemove = function(event){
            event.preventDefault();
            if(selected){
                
                if(startY === null){
                    startY = event.pageY;
                    startX = event.pageX;
                }
                
                offsetToMouseY = event.pageY - startY;
                offsetToMouseX = event.pageX - startX;
                
                if(onmousemoveCallback){
                    onmousemoveCallback(
                        {
                            y: offsetToMouseY,
                            x: offsetToMouseX         
                        });
                }
            }
            
        };
    };
}());
var moveFun = function(pos){
    console.log(pos.x, pos.y);
};
makeDraggable(document.getElementById("handle"), moveFun);