[英]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.