DIV 그리드 스냅 및 마우스 따르기

Question

작은 사각형 칸이 마우스를 따라야하지만 3x3 픽셀 격자로 스냅해야합니다.

여기 내 시도 :

$(document).mousemove(function(e) { 
    window.x = e.pageX; 
    window.y = e.pageY; 
    if(window.x % 9 === 0){ 
    $("div").css("left",window.x); 
    $("div").css("top",window.y); 
    } 
}); 

그러나 완벽 스냅 매우 느린하지 않습니다. 또한 pixelgrid는 브라우저 창의 크기가 아니라 상위 div 컨테이너의 위치에 맞춰 정렬되어야합니다.

Answer 1

사각형 크기를 정의하고 width 및 height을 빼면됩니다.

UPDATE 그것을 위해

$(document).mousemove(function(e) { 
 
    demiSquareX = $(".inner").width()/2; 
 
    demiSquareY = $(".inner").height()/2; 
 
    windowX = e.pageX - $(".outer").offset().left - demiSquareX ; 
 
    windowY = e.pageY - $(".outer").offset().top - demiSquareY; 
 
    if(windowX<=0 || windowX >=($(".outer").width()-$(".inner").width()) || windowY <=0 || windowY >= ($(".outer").height()-$(".inner").height())){ 
 
     //out 
 
    }else{ 
 
    if(windowX % 3 == 0 || windowY % 3 == 0){ 
 
     $(".inner").css("left",windowX); 
 
     $(".inner").css("top",windowY); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer" style="border:3px solid black;width:300px;position:relative;height:300px;left:100px;top:50px"> 
 
<div class="inner" style="background:red;width:20px;height:20px;position:absolute"></div> 
 
</div>