Jquery | परिभाषित क्षेत्र में div तत्व प्राप्त करें

Question

क्या div तत्वों को एक निर्धारित क्षेत्र में पूरी तरह से फ़िट करने का एक आसान तरीका है?

उदाहरण:

<div id="redbox"> RESIZE DIV </div> 

<div id="grid"> 
    <div id="box1"></div> 
    <div id="box2"></div> 
    <div id="box3"></div> 
    <div id="box4"></div> 
</div> 

मैं 4 बक्से (ग्रे) हो गया और मैं (सभी बक्से के ऊपर लाल) एक div आकार बदलने के लिए कर रहा हूँ। आकार बदलने के बाद मैं जानना चाहता हूं कि इस क्षेत्र में कौन से div तत्व पूरी तरह फिट बैठ रहे हैं।

क्या कोई जानता है कि यह कैसे करें? JQUERY में कोई विधि या कार्य है?

Answer 1

ऐसा लगता है कि withinBox प्लगइन आपको यह हल करने में मदद कर सकता है (jquery.fn.withinBox)। आप इस तरह कोड इस्तेमाल कर सकते हैं:

var area = $('#redbox'), 
    offset = area.offset(), 
    selected = $('#grid div').withinBox(offset.left, 
             offset.top, 
             area.width(), 
             area.height() 
             ); 

Answer 2

मुझे नहीं लगता कि इसके लिए पहले से ही पूरा समाधान है। इसके अनुसार यह विभिन्न हो सकता है।

लेकिन आप इसके लिए document.elementFromPoint फ़ंक्शन का उपयोग कर सकते हैं।

पुन: प्रयोज्य div की पूर्ण स्थिति को जानना आप निर्देशांक का नक्शा बना सकते हैं और फिर div के अंतर्गत कौन से तत्व देख सकते हैं।

Answer 3

क्या मैं JQuery के साथ क्या होता है की जाँच करने के लिए, उनके .offset() मूल्य हो रही सभी तत्वों के माध्यम से लूप है, प्लस चौड़ाई और ऊंचाई।

तो प्रत्येक तत्व के लिए मैं इन चार valuyes मिल जाएगा:

X1 (offset().top) 
Y1 (offset().left) 
X2 (= X1 + width) 
Y2 (= Y1 + height) 

मैं (प्रत्येक तत्व की जांच करने के लिए अभी भी) के बाद चार अंक की जाँच करने के इन मूल्यों का उपयोग करेगा

x1,y1 x1,y2 x2,y2 x2,y1 (the four corners) 

प्रदान की हमने "कवर" डीवीवी (इसे चार कोनों xd1, yd1, xd2, yd2 को पुनर्प्राप्त करने) के साथ एक ही ट्रिंग किया है, मुझे इस तरह का कारण होगा:

यदि इन बिंदुओं में से एक या अधिक मेरे "कवर" डीआईवी में आता है, तो डीआईवी "कवर" पर विचार करें।

संपादित करें: मुझे नहीं पता था कि के लिए एक प्लगइन था, मुझे लगता है कि यह आंतरिक यांत्रिकी मेरा की तरह हैं, लेकिन मुझे यकीन है रखने के लिए यह मेरा :)