0

私はdivコンテナを持っており、クラスのデモと重力のようなカップルdivの中にあります

<div id="container" style="position:relative;width=400px;height=400px;">
<div class="demo gravity" ></div>
<div class="demo gravity"></div>
<div class="demo gravity"></div>
</div>

そして私は次のようなコードから新しいdivを追加します

    var temp = $('<div/>');
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

onReady関数で私は次のようなコードを持っています

$(.demo).resizable().draggable().droppable() ;

内部のdivでは機能しますが、コードから追加したdivでは機能しません。コードからのDivは、id = "container"でdiv内に表示されますが、サイズ変更/ドラッグ可能/ドロップ可能ではありません。誰かが問題が何であるか知っていますか？

4

3 に答える 3

4

問題は、すべての兄弟での呼び出しの後に新しいdivを追加していることです。resizable().draggable().droppable()

追加する前にこれを追加するだけではいけません（ところで、これらの呼び出しをすべて連鎖させることができます）：

    var temp = $('<div/>');
    temp.attr('id', 'foo')
    .css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
       })
   .addClass("gravity")
   .addClass("demo")
   .resizable().draggable().droppable();
$('#container').append(temp);

新しく追加されたdivが実際に機能することを示すjsfiddleは次のとおりです。http：//jsfiddle.net/xqakj/

于 2012-05-24T11:13:33.013 に答える
2

新しく作成されたdivに対してもこれを作成する必要があります。

temp.resizable().draggable().droppable();
于 2012-05-24T11:12:33.997 に答える
2

ここにあなたのためのフィドルの例が機能しているようです。

http://jsfiddle.net/ymutlu/cvZpX/2/

フィドルを削除した場合、

    var temp = $('<div>');
    temp.append("33");
    temp.attr('id', 'foo');
    temp.css( {
        position : 'absolute',
        top : '0px',
        left : '0px',
        width : '200px',
        height : '40px'
    });​
    temp.addClass("gravity");
    temp.addClass("demo");
    $('#container').append(temp);

var demo = $(".demo");
demo.resizable().draggable().droppable();​

//使用できるJamiecコメントの後に編集

temp.resizable().draggable().droppable();​

ここで一時divを追加します。

于 2012-05-24T11:23:19.850 に答える