JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<div id="area">
    <div>
        <div></div>
    </div>
</div>
<div id="cursor"></div>

CSS

html {
    cursor: none;
}

#cursor {
    background: transparent url(http://telcontar.net/Misc/screeniecursors/Cursor%20arrow%20Aero.png) no-repeat 0 0;
    width: 17px;
    height: 23px;
    position: absolute;
    pointer-events: none;
}

#area {
    height: 300px;
    background-color: #eee;
}

#area > div {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
}

#area > div > div {
    background-color: #333;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    font-size: 10px;
}

JavaScript

$(function() {
    
    var area = $('#area');
    var circle = area.children('div');
    var cursor = $('#cursor');
    var html = $('html');
    
    circle.draggable();
    
    var xo = 0;
    var yo = 0;
    
    var refresh = function(event) {
        
        cursor.css({
            left: event.clientX - xo,
            top: event.clientY - yo
        });
        
    };
    
    html.mousemove(function(event) {
    
        refresh(event);
    
    });
    
    circle.mousedown(function(event) {
    
        xo = event.clientX - (circle.offset().left + circle.outerWidth() / 2);
        yo = event.clientY - (circle.offset().top + circle.outerHeight() / 2);
        
        refresh(event);
    
    });
    
    circle.mouseup(function(event) {
    
        xo = 0;
        yo = 0;
        
        refresh(event);
    
    });
    
});