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');
}
});
推荐答案
这是我最终做的工作:
$(".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屋!