当前位置: 动力学知识库 > 问答 > 编程问答 >

Image deminsion issue with jquery resizable

问题描述:

The below code creates an image when the button is clicked on. You can see the image created in firebug DOM. But height and width is 0px. Image dimensions is not being detected.

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

网友答案:

This is because .resizable() calculates the initial size based on the target. In your case, you are making the image resizable before appending it to the DOM, and as such the size of the image is not known since it hasn't been loaded yet, which results in a size of 0.

If you append the image before making it resizable it should work just fine. Like this:

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++;
});

Also, I recommend you to disable the browsers default image drag and selection. You can do this by adding .disableSelection() (currently undocumented) to your image element.

网友答案:

For me work this code (see jquery resizable append image size problem, but I added darggable in load() too)

elem.load(function(){$(this).resizable().parent().draggable();}).appendTo('#container');
分享给朋友:
您可能感兴趣的文章:
随机阅读: