Find the place of a cursor in rectangle

Question

I don't know how to find the place part (one of 4 triangles) of a cursor in a rectangle.

This image is more efficient than my explication :s

Im in javascript (so the rectangle is a DIV, 0,0 placed) I have those varaibles :

var cursor_x = e.clientX + $(document).scrollLeft()
var cursor_y = e.clientY + $(document).scrollTop()

var rect_w = $( rectangle ).width()
var rect_h = $( rectangle ).height()

I just want to know mathematically where is the cursor, in the triangle 1, 2, 3 or 4

Answer 1

What I think is the easiest way is to first normalize y so the computation is the same as for a square and then check for on which side of the diagonals you are...

var ynorm = y * w / h;
var s1 = x > ynorm ? 0 : 1;
var s2 = (w - x) > ynorm ? 0 : 1;
var area = s1*2 + s2;

the final area variable is a number between 0 and 3 telling in which of the four parts you are.

Answer 2

@6502: Thk you, its very helpful.

For more info, im working on an experimental light sortable jquery plugin, that can work with floating placement (top, left, right, bottom)

the code :

simply use $( ..selector.. ).sortable({ items: ..selector.. })

-

$.fn.sortable = function( o ) {     
        o.self = this;
        o.helper = null;        
        $(document).bind('mouseup.sortable', function(e) {
            if( o.sortable ) {
                o.sortable.css({ opacity: ''});
                if( o.target ) {
                    if( o.area == 's' ) {   
                        o.sortable.css({ float: '' })                                           
                    }
                    else if( o.area == 'n' ) {
                        o.sortable.css({ float: '' })
                        o.target.css({ float: '' })
                    }
                    else if( o.area == 'w' ) {                      
                        o.target.css({ float: 'left' })
                        o.sortable.css({ float: 'left' })
                    }
                    else if( o.area == 'e' ) {                      
                        o.target.css({ float: 'left' })
                        o.sortable.css({ float: 'left' })                           
                    }                   
                    o.target[ o.area == 's' || o.area == 'e' ? 'before':'after']( o.sortable );
                    o.target[0].style.setProperty( 'cursor', false , false);
                    o.target = null;                
                }   
                o.helper.remove();
                o.sortable = null;              
            }
        }).bind('mousemove.sortable', function(e) {         
            if( o.sortable ) {
                o.ex = e.clientX  + $(document).scrollLeft() + 10
                o.ey = e.clientY + $(document).scrollTop() - o.sortable[0]._height - 10
                o.helper.css({ left: o.ex, top: o.ey });
            }
        });
        return $( this.selector ).delegate( o.items, 'mousemove.sortable', function(e) {            
            if( o.sortable && o.sortable[0] != this ) {
                var self = $(this)
                var x = e.clientX  + $(document).scrollLeft() - self.offset().left 
                var y = e.clientY + $(document).scrollTop() - self.offset().top
                var w = self.width()
                var h = self.height()               
                var ynorm = y * w / h;
                o.area = (w - x) > ynorm ? ( x > ynorm ? 's':'e' ) : ( x > ynorm ? 'w':'n' );                   
                this.style.setProperty( 'cursor', o.area+'-resize', 'important');
                o.target = self;
            }
        }).delegate( o.items, 'mousedown.sortable', function( e ) {         
            o.sortable = $(this).css({ opacity: 0.4 });
            this._width = o.sortable.width();
            this._height = o.sortable.height();         
            o.helper = o.sortable.clone().css({ position: 'absolute', left: -99999, top: 0 })
            $('body').append( o.helper )            
            return false;


}); 
    }