Jquery克隆可调整大小的可拖动项不能正常工作

Question

我试图克隆一个可调整大小和可拖动的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));
});

Answer 1

问题是调用resizable会将handles添加到调用它的元素中。因此，当您克隆resizable元素时，它会克隆handles并在克隆元素上调用resizable时添加handles，因此您最终会得到两组句柄，其中一组没有任何行为链接。

解决这个问题的一种方法是在调用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);
    });

http://jsfiddle.net/bmja1fau/