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组句柄，其中一组不会t有任何行为联系。

解决此问题的一种方法是在调用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/

jquery clone可调整大小draggable无法正常工作

1 个答案: