[英]jquery clone resizable draggable not working properly
我正在尝试克隆一个可调整大小和可拖动的div,但它无法正常工作......
这是我的实际HTML代码:
<div class="resizable" class="ui-widget-content">
<div class="menuTrigger"></div>
<ul>
<li class="clone">Clone</li>
<li class="remove">Remove</li>
</ul>
</div>
这是我的实际jQuery代码:
function initialize(that){
$(that).resizable({
handles: 'n, e, s, w, ne, se, sw, nw'
});
$(that).draggable({
stack: "div",
distance: 0
});
$(that).find(".clone").click(function(){
var $clone = $(this).parents('.resizable').clone();
var offset = $(this).parents('.resizable').offset();
$('body').append($clone);
initialize($clone);
});
$(that).find(".remove").click(function(){
$(this).parents('.resizable').remove();
});
$(that).find(".menuTrigger").click(function(){
$(this).parent().find('ul').toggle();
});
}
$(".resizable").each(function(){
initialize($(this));
});
问题是调用resizable
会为你调用它的元素添加handles
。 因此,当您克隆resizable
元素时,它会克隆handles
并在您在克隆元素上调用resizable时添加handles
,因此您最终会得到2组句柄,其中一个句柄没有链接任何行为。
解决此问题的一种方法是在调用resizable之前从克隆中删除句柄。 像这样:
$(that).find(".clone").click(function(){
var $clone = $(this).parents('.resizable').clone();
var offset = $(this).parents('.resizable').offset();
$clone.find('.ui-resizable-handle').remove()
$('body').append($clone);
initialize($clone);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.