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.

如果您在使图像可调整大小之前附加图像，它应该可以正常工作。像这样：

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，但我也在load（）中添加了darggable）

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

jquery可调整大小的图像deminsion问题

2 个答案: