jQuery可調整大小的圖片排除問題

Question

下面的代碼在點擊按鈕時創建一個圖片。你可以看到在螢火蟲DOM中創建的圖像。但高度和寬度是0px。圖像尺寸未被檢測到。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"> 
</script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"> 
</script> 
<button style="width:100px; height:30px;">test</button> 
<p style="height:400px; width:500px;border:2px solid red;"></p> 

    <script type="text/javascript"> 
var spanid = 1; 
$("button").click(function() { 
    var elm = $('<img id=spanId' + spanid + ' src="http://www.carsyouwilldrive.com/wp-content/uploads/2009/06/futurecar1.jpg"/>'); 
    elm.resizable().parent().draggable({ 
    cursor: "move" 
    }).appendTo('p'); 
    spanid++; 
});</script> 

Answer 1

這是因爲.resizable()根據目標計算初始大小。在你的情況下，你在將圖像附加到DOM之前將圖像調整大小，因此圖像的大小尚未知道，因爲它尚未加載，導致大小爲0.

如果你可以在調整大小之前附加圖片，它應該可以正常工作。像這樣：

var spanid = 1; 
$("button").click(function() { 
    var elm = $('<img id=spanId' + spanid + ' src="http://www.carsyouwilldrive.com/wp-content/uploads/2009/06/futurecar1.jpg"/>'); 
    elm.appendTo('p').resizable().parent().draggable({ 
    cursor: "move" 
    }); 
    spanid++; 
}); 

此外，我建議您禁用瀏覽器的默認圖像拖動和選擇。您可以通過將.disableSelection()（目前未公開）添加到圖像元素來完成此操作。

Answer 2

工作對我來說這段代碼（見jquery resizable append image size problem，但我加在負載darggable（）太）

elem.load(function(){$(this).resizable().parent().draggable();}).appendTo('#container');