Question

现在我知道有很多关于此的问题，但我没有发现人和我有同样的问题，所以让我们谈谈。

所以jquery ui resizable函数将我的<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所以不要怪我哈哈

Answer 1

在调用图像.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不起作用

1 个答案: