1

以下のコードは、ボタンがクリックされたときに画像を作成します。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>
4

2 に答える 2

2

これは.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()これを行うには、画像要素に（現在文書化されていない）を追加します。

于 2011-01-12T07:02:57.333 に答える
0

私にとっては、このコードで動作します（jquery resizable append image size problemを参照してください。ただし、load() にも darggable を追加しました）。

elem.load(function(){$(this).resizable().parent().draggable();}).appendTo('#container');
于 2013-02-19T12:16:31.283 に答える