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));
});

DEMO

- user3542686

Answer 1

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

解决此问题的一种方法是在调用 resizable 之前从克隆中删除 handles。像这样：

    $(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/

- Julien Grégoire