Tìm vị trí con trỏ trong hình chữ nhật

Question

Tôi không biết cách tìm phần địa điểm (một trong 4 hình tam giác) của một con trỏ trong hình chữ nhật.

Hình ảnh này là hiệu quả hơn so với giải thích của tôi: s

Im trong javascript (vì vậy hình chữ nhật là một DIV, 0,0 đặt) Tôi có những 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() 

Tôi chỉ muốn biết toán học ở đâu là con trỏ, trong hình tam giác 1, 2, 3 hoặc 4

thx

Answer 1

Những gì tôi nghĩ là cách đơn giản nhất là để bình thường hóa đầu tiên y nên việc tính toán cũng giống như cho một hình vuông và sau đó kiểm tra trên mà bên của đường chéo bạn là ...

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

trận chung kết Biến số area là một số nằm trong khoảng từ 0 đến 3 cho biết bạn thuộc bốn phần nào.

Answer 2

@ 6502: Thk bạn, nó rất hữu ích.

Mọi chi tiết, im làm việc trên một ánh sáng thực nghiệm jquery sắp xếp được plugin, có thể làm việc với vị trí nổi (trên cùng, bên trái, bên phải, phía dưới)

mã:

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; 


}); 
    }