Find the cursor position in the rectangle

Question

I do not know how to find the part of the place (one of the four triangles) of the cursor in the rectangle.

This image is more efficient than my explication: s

Im in javascript (so a rectangle div, 0,0 is placed) I have these variables:

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 the cursor is in triangle 1, 2, 3 or 4

THX

Answer 1

I think the easiest way is to normalize first y, so the calculation will be the same as for the square, and then check which side of the diagonals you are on ...

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

area - 0 3, , .

Answer 2

@6502: Thk you, .

im jquery-, (, , , )

:

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;


}); 
    }