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

问题是您在调用其所有兄弟姐妹之后resizable().draggable().droppable()添加新 div 。

您能否在附加之前添加它（顺便说一句，您可以将所有这些调用链接在一起）：

    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);

这是 jsfiddle 演示新添加的 div 确实有效：http: //jsfiddle.net/xqakj/

于 2012-05-24T11:13:33.013 回答
2

你也需要为新创建的 div 做这个：

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

Here fiddle example for you,似乎工作。

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 回答