Jquery UI 크기 조정이 가능한 콘텐츠의 종횡비에 따른 종횡비 설정

Question

다른 종류의 div가있는 페이지를 만드는 앱을 제작 중입니다. 일부는 <img>으로 채워지고 일부는 <span>으로 채워집니다. 모든 div에는 draggable이라는 클래스가 있습니다. 나는이 일을하여 드래그 클래스 모든 DIV 년대의 크기를 재조정합니다

 $('.draggable').resizable({ 
      maxWidth: 500, 
      aspectRatio: false, 
      containment: 'parent', 
      start: function() { 
       last_element = $(this); 
      }, 
      resize: function() { 
       $(this).children('img').css('width',$(this).css('width')); 
       $(this).children('img').css('height',$(this).css('height')); 
      }, 
      stop: function() { 
       updateDiv($(this).attr('id')); 
      } 
     }); 

DIV의 내용에 의존 aspectRatio 값을 만들 수있는 방법이 있나요? 나는이 일을 시도 : 텍스트 상자 (그들 스팬과 그 div의)는 (그들 imgs와 그 된 div) aspectratio = 거짓,하지만 이미지 상자 크기를 조정할 수 있도록

이

aspectRatio: ($(this).children('img').length ? true : false), 

내가 원하는 한 aspectratio = TRUE .

두 개의 다른 클래스 (.draggable 및 .draggable_img)를 설정할 수 있지만 대신 중복 코드가 없어도 할 수있는 간단한 것이 있는지 궁금 할 것입니다.

Answer 1

이것은 문맥상의 문제입니다. $(this)은 해당 레벨의 .draggable 요소 대신 window을 참조합니다. 당신이 할 수있는 일은 이것과 같습니다. 일단 당신이 true/false 설정에 대한 귀하의 논리 괜찮아요.

$('.draggable').each(function() { 

    $(this).resizable({ 
     maxWidth: 500, 
     aspectRatio: ($(this).children('img').length ? true : false), 
     containment: 'parent', 
     start: function() { 
      //last_element = $(this); 
     }, 
     resize: function() { 
      //$(this).children('img').css('width',$(this).css('width')); 
      //$(this).children('img').css('height',$(this).css('height')); 
     }, 
     stop: function() { 
      //updateDiv($(this).attr('id')); 
     } 
    }); 
});​ 

Check out this fiddle.