Проблема с уменьшением изображения при изменении размера jquery - PullRequest
Новая
       21

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

1 голос
/ 12 января 2011

Приведенный ниже код создает изображение при нажатии кнопки. Вы можете увидеть изображение, созданное в 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>

Ответы [ 2 ]

2 голосов
/ 12 января 2011

Это потому, что .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() (в настоящее время недокументированное) к элементу изображения.

0 голосов
/ 19 февраля 2013

Для меня работает этот код (см. jquery resizable добавление размера изображения проблемы , но я добавил darggable в load () тоже) 

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