jQuery UI:从原始div拖动并克隆,但保留克隆

Question

我有一个div,它应用了jQuery UI Draggable.我想要做的是点击并拖动它,并创建一个保存在dom中的克隆,并在删除时不删除.

想想一副牌,我的盒子元素是牌组,我想从牌组中拉出牌/ div并将它们放在我的页面周围,但它们将是原始div的克隆.我只是想确保你不能创建一个克隆的div的另一个克隆.

我使用了以下内容,它不像我想要的那样工作:

$(".box").draggable({ 
        axis: 'y',
        containment: 'html',
        start: function(event, ui) {
            $(this).clone().appendTo('body');
        }
});

我想出了我的解决方案:

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone'
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});

Answer 1

这是我最终做的工作:

$(".box-clone").live('mouseover', function() {
    $(this).draggable({ 
        axis: 'y',
        containment: 'html'
    });
});
$(".box").draggable({ 
    axis: 'y',
    containment: 'html',
    helper: 'clone',
    stop: function(event, ui) {
        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
    }
});

Answer 2

如果你想将#source <ul />中的元素(比如<li />)移动到#destination <ul />,并且你希望它们克隆(而不是移动),仍然是在右边可排序,我找到了这个解决方案:

$(function() {

    $("#source li").draggable({
        connectToSortable: '#destination',
        helper: 'clone'
    })

    $("#destination").sortable();

  });

我知道它看起来很简单,但它对我有用!:)