jQuery的调整大小，拖动起来不起作用

问题描述：

现在我知道已经有很多关于这个问题，但我没有找到有同样的问题，因为我做的人，让我们切入正题。jQuery的调整大小，拖动起来不起作用

所以jQuery UI的调整大小功能设定我的<img />元素dimensions到0px我甚至试图把我自己的width和height。我已经尝试删除它，之后，一切看起来都很好，即使draggable工作正常。

那么是什么原因造成的？

这里的jsfiddle例如：http://jsfiddle.net/SY9yq/3/

和代码本身：

#test{ 
    width:90%; 
    height:500px; 
} 
.container{ 
    display:inline-block; 
    left:20px; 
    top:20px; 
    border:1px solid black; 
} 
$(document).ready(function(){ 
    callFunctionOne(); 

    function callFunctionOne(){ 
     elements = buildElements(); 
     $("#test").append(elements); 
    } 

    function buildElements(){ 
     return $("<div>") 
      .addClass("container") 
      .draggable() 
      .append(
       $("<img />") 
        .addClass("image") 
        .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png") 
        //if i delete this everything will work 
        .resizable() 
        //but if i keep it it sets image dimensions to 0px     
      );      


    } 
});

顺便说一下，这是我的实际脚本，这是一个有点凌乱的真正简单的例子：P所以不要怪我笑

答

您需要确保在调用.resizable()之前加载图像。

固定的jsfiddle：http://jsfiddle.net/VKe5h/

$(document).ready(function() { 
    callFunctionOne(); 

    function callFunctionOne() { 
     elements = buildElements(); 
     $("#test").append(elements); 
    } 

    function buildElements() { 
     return $("<div>") 
      .addClass("container") 
      .draggable().append(
       $('<img class="resizable" />') 
       .addClass("image") 
       .attr("src", "http://blog.stackoverflow.com/audio/stackoverflow-300.png") 
       .load(function() { 
        $(this).resizable(); 
       }) 
      ); 
    } 
});

jQuery的调整大小，拖动起来不起作用

相关推荐