在矩形中查找光标的位置答案

【问题标题】：Find the place of a cursor in rectangle在矩形中查找光标的位置
【发布时间】：2011-02-17 21:43:27
【问题描述】：

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

这张图片比我的解释更有效：s

我在 javascript 中（所以矩形是一个 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 中

【问题讨论】：

标签： javascript jquery mouse-cursor

【解决方案1】：

我认为最简单的方法是首先对y 进行归一化，因此计算与正方形相同，然后检查您在对角线的哪一侧...

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 之间的数字，告诉您属于四个部分中的哪一个。

【讨论】：

【解决方案2】：

@6502：谢谢，很有帮助。

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


}); 
    }

【讨论】：