JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<html>
    <body>
        <div class="main">
            <div class="inner">
                
            </div>
        </div>
        <br/>
        <div class="log">
            
        </div>
    </body>
</html>

CSS

html,body {
    height: 100%;
    width: 100%;
}

.main {
    position: absolute;
    top: 30px;
    left: 30px;
    border: 1px solid red;
    width: 80%;
    height: 300px;
}

.inner {
    position: absolute;
    border: 1px solid blue;
    width: 20px;
    height: 20px;
}

.log {
    position: absolute;
    top: 350px;
}

JavaScript

$(function() {

	var $main = $('.main');
    var off = $main.offset();
    var halfw = $main.width()/2;
    var centerx = off.left + halfw;
    var halfh = $main.height()/2;
    var centery = off.top + halfh; 
    var $in = $('.inner');
    
    var $log = $('.log');
    
    $('body').on('mousemove',function(e) {
		var rx = e.clientX - centerx;
        var ry = e.clientY - centery;
        
        var rr = rx/ry;
        $in.css({
           top: (rr*halfh);
        });
        
        $log.html('Relative :' + rx + ',' + ry + '\n' + JSON.stringify($in.offset()));
    });
    
    
    
});