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 offsetToMouseY = null;
    var offsetToMouseX = null;
    
    return function(element, onmousemoveCallback){
        element.style.position = "absolute";
        element.onmousedown = function(event){
            selected = true;
        };
        document.onmouseup = function(event){
            selected = false;
            offsetToMouseY = null;
            offsetToMouseX = null;
        };
        document.onmousemove = function(event){
            event.preventDefault();
            if(selected){
                if(onmousemoveCallback){
                    onmousemoveCallback(event);
                }
                if(offsetToMouseY === null){
                    offsetToMouseY = event.pageY - element.offsetTop;
                    offsetToMouseX = event.pageX - element.offsetLeft;
                }
                
                element.style.top = (event.pageY - offsetToMouseY) + "px";
                element.style.left = (event.pageX - offsetToMouseX) + "px";
            }
            
        };
    };
}());
var moveFun = function(event){
    console.log(event.x);
};
makeDraggable(document.getElementById("handle"), moveFun);