Javascript 在矩形中查找光标的位置

我不知道如何在矩形中找到光标的位置部分（4个三角形中的一个）

这个图像比我的解释更有效：s

javascript中的Im（因此矩形是一个DIV，0,0） 我有这些变量：

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

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

我只想从数学上知道光标在哪里，在三角形1，2，3或4中

---

thx

我认为最简单的方法是首先规范化

y

，因此计算与正方形相同，然后检查对角线的哪一侧

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

---

最后一个

区域

变量是一个介于0和3之间的数字，告诉你在这四个部分中属于哪一部分。

@6502:Thk you，它非常有用

要了解更多信息，我正在开发一个实验性的可轻排序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;


}); 
    }