[英]jQuery UI resizable cloned element(.clone(true)) doesn't resize
[英]how to make new live / cloned element resizable with 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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.