javascript - 如何使新的生活/克隆元素可调整大小与jQuery UI？

我正在实时创建html元素并将其附加到窗口。

我有的问题是我不能在它们上使用jquery ui。我尝试了deffer方法，但是效果不佳。

我要完成的工作是克隆最后一个div，将其添加到container并将其设置为resizable

这是一些代码jsfiddle：

<div id="container" class="ui-widget-content">
     <h3 class="ui-widget-header">Containment</h3>

    <div id="" class="ui-state-active resizable">
         <h3 class="ui-widget-header">Resizable</h3>

    </div>
    <div id="" class="ui-state-active resizable">
         <h3 class="ui-widget-header">Resizable</h3>

    </div>
</div>
<button class="add">add</button>

#container {width: 600px;height: 300px;}
#container h3 {text-align: center;margin: 0;margin-bottom: 10px;}
.resizable {width: 100px;height: 100px;float: left;}
.resizable, #container {padding: 0.5em;}

var dfd = $.Deferred();
dfd.done(function () {
    var lastDiv = $('.resizable').last();
    var lastDivClone = lastDiv.clone();
    lastDivClone.appendTo('#container');
    return lastDivClone;
});

$('.add').on("click", function () {
    var x = dfd.resolve();
    x.resizable("enable");
});

$(".resizable").resizable({
    containment: "#container",
    grid: 50
});

有任何想法吗？

最佳答案

首先卸下可调整大小的手柄。

lastDivClone.appendTo('#container').find('.ui-resizable-handle').remove()
    .end().resizable({
        containment: "#container",
        grid: 50
    });

http://jsfiddle.net/ExplosionPIlls/945p6/2/

关于javascript - 如何使新的生活/克隆元素可调整大小与jQuery UI？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16408420/