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 回答