Проблема с разрешением изображения с jquery resizable

Question

Приведенный ниже код создает изображение при нажатии кнопки. Вы можете увидеть изображение, созданное в DOM Firebug. Но высота и ширина 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, но я добавил darggable нагрузки() тоже)

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