サイズ変更可能なjqueryを使用したイメージデミッションの問題

Question

次のコードは、ボタンをクリックしたときにイメージを作成します。 Firebug 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になるので、イメージのサイズはまだ分かりません。

Ifサイズを変更できるようにする前にイメージを追加するとうまくいくはずです。このように：

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');