2

これについて多くの質問があったことは知っていますが、私と同じ問題を抱えている人を見つけられなかったので、要点に移りましょう.

したがって、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だから私を責めないでください笑

4

1 に答える 1

0

イメージを呼び出す前に、イメージがロードされていることを確認する必要があります.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();
                })
            );
    }
});​
于 2012-07-06T06:15:15.217 に答える