jQuery-UI Resizable: स्केल सभी भी resizable div

Question

के अनुपात में तत्वों को रीसाइज़ करें मेरे पास एक आकार बदलने योग्य div है जो तत्वों के चयन पर स्थित है जिसे रीसाइज़ करने के लिए सेट किया गया है।

दृश्यमान, आकार बदलने योग्य तत्व भी रीसाइज तत्वों के लिए एक बाध्यकारी बॉक्स है।

मैं आकार बदलने योग्य div के अनुपात में रीसाइज़ तत्वों का आकार बदलने में सक्षम होना चाहता हूं। जब आकार बदलने यूआई का डिफ़ॉल्ट व्यवहार प्रत्येक तत्व एक निश्चित छोड़ दिया है और शीर्ष स्थान बनाता है:

http://jsfiddle.net/digitaloutback/SrPhA/2/

लेकिन मैं सीमांकन बॉक्स के साथ पैमाने पर करने के रूप में यह आकार दिया है छोड़ दिया और प्रत्येक एआर तत्व के शीर्ष समायोजित करना चाहते हैं।

मैंने पहले सोचा था कि यह भी रीसाइज प्लगइन को बदलकर बहुत अधिक परेशानी नहीं होगी। यह है कि मैं क्या आकार बदलने के लिए जोड़ा है: _alsoResize:

// Get the multipliers 
var scaleX = self.size.width/os.width; 
var scaleY = self.size.height/os.height; 

newElW = (parseInt(el.css('width')) * scaleX); 
newElH = (parseInt(el.css('height')) * scaleY); 
newElL = (parseInt(el.css('left')) * scaleX); 
newElT = (parseInt(el.css('top')) * scaleY); 

el.css({ width: newElW, height: newElH, left: newElL, top: newElT }); 

जैसा कि आप देखेंगे, बक्से कुछ हद तक अंतराल:

http://jsfiddle.net/digitaloutback/SrPhA/4/

कुछ आंकड़े गुब्बारों जा करने के लिए और लगता है काफी नहीं कर सकते इसे समझें, किसी भी सुझाव की सराहना की। स्क्रिप्ट & ब्राउज़र के बीच दशमलव स्थानों की संभावित रूप से विसंगति?

Answer 1

शायद तुम संरचना पर पुनर्विचार करने की ..

आप .resizer तत्व के अंदर .lyr तत्वों डालने और उन्हें प्रतिशत पदों .. इस तरह से वे अपने आप जबकि उनके कंटेनर आकार बदल रहा है आकार परिवर्तन के साथ इसके अंदर की स्थिति सकता है की जरूरत है। (प्लगइन उन्हें को संभालने के लिए नहीं है)

पर डेमो http://jsfiddle.net/SrPhA/65/

---

अद्यतन टिप्पणी के बाद

डी-जोड़ी करने के लिए resizeralsoResize तत्वों से आप गणना के लिए कुछ चीजों को ध्यान में रखना होगा।

• सबसे पहले, आपको शुरू करने आयाम/पदों और न तत्वों की वर्तमान उपयोग करते हैं, तो में स्थिति आप मूल करने के लिए तत्व अनुवाद करने की आवश्यकता के लिए start.width.height आदि ..
• का उपयोग करें (करने की जरूरत है resizer से दूरी के संबंध) बाएं/शीर्ष पैमाने पर और फिर वापस वे कहाँ थे करने के लिए फिर से अनुवाद कर ..

अंतिम गणना बन

newElW = start.width * scaleX; 
newElH = start.height * scaleY; 
newElL = ((start.left - op.left) * scaleX) + op.left; 
newElT = ((start.top - op.top) * scaleY) + op.top ; 

मामले को संभालने के लिए इसे और अधिक टिंकरिंग की आवश्यकता है, क्या आप Resizer के शीर्ष या बाएं किनारे को खींचकर तत्वों को स्केल कर रहे हैं ..http://jsfiddle.net/gaby/SrPhA/171/

---

नवीनतम अद्यतन

डेमो पर

में सभी दिशाओं इन सहायकों का उपयोग स्केलिंग को संभालने के लिए ..

utils: { 
     west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left}, 
     east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;}, 
     south: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top; }, 
     north: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top + delta.top; } 
    } 

http://jsfiddle.net/gaby/SrPhA/324/

बिल्कुल अद्यतन के साथ उदाहरण के कार्य

Answer 2

क्या आप * के बजाय + का उपयोग करना चाहते थे?

newElW = (parseInt(el.css('width')) + scaleX); 
newElH = (parseInt(el.css('height')) + scaleY); 
newElL = (parseInt(el.css('left')) + scaleX); 
newElT = (parseInt(el.css('top')) + scaleY); 

Answer 3

मैं मार्जिन टॉप स्थापित करने और स्थिति के लिए मार्जिन छोड़ दिया और छोड़ने 'शीर्ष' और 'छोड़' एनीमेशन के लिए डिफ़ॉल्ट पर विशेषताओं से एक छोटे से भाग्य था।

http://jsfiddle.net/SrPhA/97/