jQuery的調整大小，拖動起來不起作用

Question

現在我知道已經有很多關於這個問題，但我沒有找到有同樣的問題，因爲我做的人，讓我們切入正題。

所以jQuery UI的調整大小功能設定我的<img />元素dimensions到0px我甚至試圖把我自己的width和height。我已經嘗試刪除它，之後，一切看起來都很好，即使draggable工作正常。

那麼是什麼原因造成的？

這裏的jsfiddle例如：http://jsfiddle.net/SY9yq/3/

和代碼本身：

#test{ 
    width:90%; 
    height:500px; 
} 
.container{ 
    display:inline-block; 
    left:20px; 
    top:20px; 
    border:1px solid black; 
}​ 
$(document).ready(function(){ 
    callFunctionOne(); 

    function callFunctionOne(){ 
     elements = buildElements(); 
     $("#test").append(elements); 
    } 

    function buildElements(){ 
     return $("<div>") 
      .addClass("container") 
      .draggable() 
      .append(
       $("<img />") 
        .addClass("image") 
        .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png") 
        //if i delete this everything will work 
        .resizable() 
        //but if i keep it it sets image dimensions to 0px     
      );      


    } 
}); 

順便說一下，這是我的實際腳本，這是一個有點凌亂的真正簡單的例子：P所以不要怪我笑

Answer 1

您需要確保在調用.resizable()之前加載圖像。

固定的jsfiddle：http://jsfiddle.net/VKe5h/

$(document).ready(function() { 
    callFunctionOne(); 

    function callFunctionOne() { 
     elements = buildElements(); 
     $("#test").append(elements); 
    } 

    function buildElements() { 
     return $("<div>") 
      .addClass("container") 
      .draggable().append(
       $('<img class="resizable" />') 
       .addClass("image") 
       .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png") 
       .load(function() { 
        $(this).resizable(); 
       }) 
      ); 
    } 
});​