jQuery可调整大小的图像分类问题答案

【问题标题】：Image deminsion issue with jquery resizablejQuery可调整大小的图像分类问题
【发布时间】：2011-01-12 06:03:37
【问题描述】：

当点击按钮时，下面的代码会创建一个图像。您可以看到在 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>

【问题讨论】：

标签： jquery image resizable

【解决方案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()（当前未记录）添加到您的图像元素来做到这一点。

【讨论】：

谢谢。按预期工作。我不知道 disableSelection()。我发现它对文本框特别有用。一定会用到的。

【解决方案2】：

对我来说，使用此代码（请参阅jquery resizable append image size problem，但我也在 load() 中添加了 darggable）

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

【讨论】：