jQuery आकार बदलने वाले तत्व

Question

मैंने इस समस्या के लिए चारों ओर खोज की है लेकिन इसे हल करने के लिए वास्तव में एक निश्चित समाधान या उदाहरण नहीं मिला है। JQuery का उपयोग करते हुए, जब मैं एक आकार बदलने योग्य घुमाता हूं, हैंडल और बाद में आकार बदलने वाले ऑपरेशन गुम हो जाते हैं। मैं इस बारे में कैसे हल या काम कर सकता हूं? यहाँ मैं किस बारे में बात कर रहा हूँ का एक उदाहरण है: http://jsfiddle.net/LVU7c/

बेला में कोड है:

$('#widget').resizable({ handles: 'n, e, s, w' }); 

और सीएसएस एक सरल div टैग 90 अंश घुमाने के।

Answer 1

इसके लिए मूल अवधारणा Linus Gudn Jokela द्वारा पोस्ट की गई थी, जिन्होंने अपना उत्तर हटा दिया, और मेरे अनुरोध के बावजूद इसे पुनर्स्थापित नहीं किया है।

आप अपनी सामग्री के लिए घुमावदार भीतरी रैपर का उपयोग कर सकते हैं, फिर बाहरी तत्व को आकार देने वाले हैंडल संलग्न करें, जो कि अवशोषित बनी हुई है।

सामग्री को कंटेनर के साथ सिंक में रखने के लिए कुछ जेएस कोड की आवश्यकता होगी जहां तक ​​ऊंचाई और चौड़ाई का संबंध है। http://jsfiddle.net/fXthv/

जे एस:

$('#widget').resizable({ 
    handles: 'n, e, s, w', 
    resize: function(){ 
     correct(this); 
    } 
}); 

function correct(el) { 
    var widget = $('#widget_content'), 
     deg = widget.data("rotate"); 
    if (typeof deg == "number") { 
     widget.css({ 
      width: (function() { 
       if (deg % 180 == 0) return $(el).outerWidth() 
       else return $(el).outerHeight() 
      })(), 
      height: (function() { 
       if (deg % 180 == 0) return $(el).outerHeight() 
       else return $(el).outerWidth() 
      })(), 
      marginLeft: (function() { 
       if (deg % 360 == 90) return $(el).outerWidth(); 
       else if (deg % 360 == 180) return $(el).outerWidth(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })(), 
      marginTop: (function() { 
       if (deg % 360 == 270) return $(el).outerHeight(); 
       else if (deg % 360 == 180) return $(el).outerHeight(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })() 
     }); 
    } 
} 

सीएसएस:

#widget { 
    width: 100px; 
    height: 100px; 
    background-color: #cecece; 
} 
#widget_content { 
    margin-left:100px; 
    width: 100px; 
    height: 100px; 
    background-image: url(http://aux.iconpedia.net/uploads/2106003206.png); 
    background-size: 100% 100%; 
    /* removing the styles below will make the image appear as expected */ 
    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    /* IE 9 */ 
    -moz-transform:rotate(90deg); 
    /* Firefox */ 
    -webkit-transform:rotate(90deg); 
    /* Safari and Chrome */ 
    -o-transform:rotate(90deg); 
    /* Opera */ 
} 

HTML:

<div id="widget"> 
    <div id="widget_content"></div> 
</div>