Znaleźć miejsce kursora w prostokącie

Question

Nie wiem, jak znaleźć część miejsca (jeden z 4 trójkątów) kursora w prostokącie.

Ten obraz jest bardziej wydajny niż mój eksplikacji: s

Im w javascript (tak prostokąt jest DIV, umieszczony 0,0) mam te 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() 

Po prostu chcę wiedzieć matematycznie, gdzie jest kursor, w trójkącie 1, 2, 3 lub 4

thx

Answer 1

Co moim zdaniem jest najprostszym sposobem jest najpierw normalizuje y więc obliczenie jest taka sama jak na placu, a następnie sprawdzić, na której stronie przekątnych jesteś ...

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

ostateczna Zmienna area to liczba od 0 do 3, informująca, w której z czterech części jesteś.

Answer 2

@ 6502: Thk you, bardzo pomocny.

Aby uzyskać więcej informacji, im pracy na plugin sortable jquery światła eksperymentalny, który może pracować z pływającym placement (górny, lewy, prawy i dolny)

kodu:

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; 


}); 
    }