Mouse Triangle Hit Test

by skibulk

HTML

<div class="drop"></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: lightgray;
}

.active {
    background: lightblue;
}

JavaScript

$('.drop').mousemove(function(event){
    var a={}, b={}, c={};    
    a.x = this.offsetLeft + this.offsetWidth;
    a.y = this.offsetTop;
    b.x = this.offsetLeft;
    b.y = this.offsetTop + this.offsetHeight;
    c.x = event.clientX;
    c.y = event.clientY;
    
    if ( isLeft(a, b, c) )
    {
		$('.drop').addClass('active');
    }
});

function isLeft(a, b, c){
     return ((b.x - a.x)*(c.y - a.y) - (b.y - a.y)*(c.x - a.x)) > 0;
}