आयत में कर्सर की जगह

Question

मुझे पता नहीं है कि एक आयत में कर्सर के स्थान भाग (4 त्रिकोणों में से एक) को कैसे ढूंढें।

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

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

: मैं उन varaibles है रों जावास्क्रिप्ट में

इम (ताकि आयत है एक DIV, 0,0 रखा) :

इस छवि को मेरी व्याख्या तुलना में अधिक कुशल है

मैं सिर्फ गणितीय रूप से जानना चाहता हूं कि त्रिकोण 1, 2, 3 या 4

thx

Answer 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 के बीच एक संख्या है जिसमें आप चार भागों में से हैं।

Answer 2

@ 6502: आप बहुत उपयोगी हैं।

अधिक जानकारी के लिए

, im एक प्रयोगात्मक प्रकाश sortable 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; 


}); 
    }