jQuery UI:从原始 div 中拖动和克隆，但保留克隆 [英] jQuery UI: Drag and clone from original div, but keep clones

问题描述

我有一个 div，它应用了 jQuery UI Draggable.我想要做的是单击并拖动它，然后创建一个保留在 dom 中并且在放下时不会删除的克隆.

I have a div, which has jQuery UI Draggable applied. What I want to do, is click and drag that, and create a clone that is kept in the dom and not removed when dropped.

想想一副纸牌，我的盒子元素是纸牌，我想从纸牌上拉出纸牌/div 并将它们放在我的页面上，但它们将是原始 div 的克隆.我只是想确保您不能为其中一个克隆的 div 创建另一个克隆.

Think of a deck of cards, my box element is the deck, and I want to pull cards/divs off that deck and have them laying around my page, but they would be clones of the original div. I just want to make sure that you cannot create another clone of one of the cloned divs.

我使用了以下方法，但效果不佳:

I have used the following, which didn't work like I wanted:

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

我想出了我的解决方案:

I figured out my solution:

$(".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');
    }
});

推荐答案

这是我最终做的有效的:

Here is what I finally did that worked:

$(".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');
    }
});

这篇关于jQuery UI:从原始 div 中拖动和克隆，但保留克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！