JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div></div>

<span></span>

CSS

div {
    background: #e1e1e1;
    margin: 60px;
    border: 1px dashed #999;
    width: 200px;
    height: 200px;
}

span {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: red;
    top: 0px;
    left: 0px;
    position: absolute;
}

JavaScript

var pos = [];
var old_pos = [];

$('div').on("mousemove touchmove", function( e ) {

    e = e.type === 'touchmove' ? e.originalEvent : e,
    pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX,
    pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY,
    pos = [ pageX, pageY ];
    
    if ( !$(this).hasClass('active') ) {

        $(this).addClass('active');
        
        mPosition = setInterval (function() {
    
            old_pos = [ pos[0], pos[1] ];
        
            console.log( old_pos );
            
            $('span').stop().animate({ 
                top: pos[1], 
                left: pos[0] 
            }, 70 );
                
        }, 90);
        

    }
    

}).on("mouseleave", function( e ) {

    $(this).removeClass('active');
    clearInterval( mPosition );

});