javascript - jquery clone resizable draggable 无法正常工作

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

Answer 1

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

解决此问题的一种方法是在调用可调整大小之前从克隆中删除句柄。像这样:

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