jQuery यूआई स्थिति "बाएं" और "शीर्ष"

Question

के बजाय "दाएं" और "नीचे" सेट करने के लिए ठीक है, यह मेरा प्रश्न है। jQuery UI स्थिति का उपयोग करना। स्क्रीन पर किसी अन्य तत्व के संबंध में तत्व को स्थानांतरित करना संभव है। यह उस तत्व पर बाईं और शीर्ष सीएसएस गुण सेट करता है जो स्क्रीन पर स्थित होता है।

मैं जो करना चाहता हूं वह बाएं और ऊपर सेट करने के बजाय है, मैं संभवतः दाएं और नीचे सेट करना चाहता हूं ताकि यदि स्थानांतरित तत्व बढ़ता या घटता है, तो यह सही दिशा में बढ़ेगा/सिकुड़ जाएगा।

मुझे विवरण में जाने दें। ठीक है, मैं क्या चाहता हूं कि यदि कोई तत्व उसके दाईं ओर स्थित है, तो मैंकी बजाय right सीएसएस संपत्ति सेट करना चाहता हूं और यदि उसके तत्व पर एक तत्व स्थित है, तो मैं top के बजाय bottom सेट करना चाहता हूं। मैं इसे jQuery UI स्थिति की using प्रॉपर्टी का उपयोग करके कर सकता हूं, लेकिन मैं टक्कर पहचान के साथ समस्याओं में भाग लेता हूं। यदि टकराव का पता flip पर सेट किया गया है और तत्व फ़्लिप हो जाता है, तो मैं इसे पहचानना चाहता हूं और यह पता लगाना चाहता हूं कि left और bottom के बजाय के बजाय मुझे right सेट करने की आवश्यकता है या नहीं। मैं जो करने की कोशिश कर रहा हूं उसके बारे में बेहतर विचार पाने के लिए नीचे दिए गए कोड को देखें।

$('#somediv').position({ 
    my: 'right bottom', 
    at: 'right top', 
    of: $('#someotherdiv'), 
    offset: '0 5', 
    collision: 'flip flip', 
    using: function(pos) { 

     // Figure out the right and bottom css properties 
     var right = $(window).width() - pos.left - $(this).outerWidth(true); 
     var bottom = $(window).height() - pos.top - $(this).outerHeight(true); 

     // Position the element so that right and bottom are set. 
     $(this).css({left: '', right: right, top: '', bottom: bottom}); 
    } 
}); 

यह बहुत अच्छा काम करता है, सिवाय इसके कि जब टकराव टकराव से फिसल जाता है। यदि यह क्षैतिज रूप से फ़्लिप हो जाता है, तो मैं को right के बजाय सेट करना चाहता हूं और यदि यह लंबवत रूप से फ़्लिप हो जाता है तो मैं के बजाय top सेट करना चाहता हूं।

आदर्श समाधान होगा अगर using फ़ंक्शन में) तत्व को फ़्लिप किया गया था और क्या दिशाओं में था। तो, किसी को भी यह पता लगाने के लिए कोई विचार है कि टकराव का पता लगाने के द्वारा तत्व को फ़्लिप किया गया था या नहीं?

Answer 1

ठीक है, इसे समझ लिया .... यह समझाने का मेरा प्रयास है कि मैंने इसे कैसे काम किया। आपको क्या करना है using फ़ंक्शन के भीतर फिर से कॉल स्थिति है। टकराव का पता लगाने के बिना इसे एक बार कॉल करें और एक बार टकराव का पता लगाने के साथ। यदि स्थिति बदलती है, तो इसे फ़्लिप किया गया था। टिप्पणियों के साथ यहां कुछ उदाहरण कोड दिया गया है।

$('#somediv').position({ 
    my: 'right bottom', 
    at: 'right top', 
    of: $('#someotherdiv'), 
    offset: '0 5', 
    collision: 'flip flip', 
    using: function (pos1) { 

     // OK, we got a position once inside the pos1 variable, 
     // let's position it again this time without collision detection. 
     $(this).position({ 
      my: 'right bottom', 
      at: 'right top', 
      of: $('#someotherdiv'), 
      offset: '0 5', 
      collision: 'none none', 
      using: function(pos2) { 
       var hpos = 'right'; 
       var vpos = 'bottom'; 

       // Check to see if it was flipped horizontal 
       if (pos1.left != pos2.left) { 
        /* It was flipped horizontally so position is now 
         my: 'left bottom', 
         at: 'left top' 
        */ 
        hpos = 'left'; 
       } 

       // Check to see if it was flipped vertical 
       if (pos1.top != pos2.top) { 
        /* It was flipped vertically */ 
        vpos = 'top'; 
       } 

       // Figure out the right and bottom css properties 
       var right = $(window).width() - pos1.left - $(this).outerWidth(true); 
       var bottom = $(window).height() - pos1.top - $(this).outerHeight(true); 

       // Set the horizontal position 
       if (hpos == 'right') { 
        $(this).css({left: '', right: right}); 
       } else { 
        $(this).css({left: pos1.left, right: ''}); 
       } 

       // Set the vertical position 
       if (vpos == 'bottom') { 
        $(this).css({top: '', bottom: bottom}); 
       } else { 
        $(this).css({top: pos1.top, bottom: ''}); 
       } 
      } 
     }); 
    } 
}); 

यदि किसी के पास अधिक कुशल विचार है, तो कृपया मुझे बताएं। धन्यवाद।