用同位素在另一个 div 中复制一个项目?
Duplicate an item in another div with isotope?
我想在右栏 ($rightcontainer) 中点击我的一篇文章。但是,我没有看到任何允许您复制项目而不是简单地移动它的同位素选项。
是否可以将我的项目保留在左栏($leftcontainer)中,同时将其添加到右侧?
谢谢你的帮助!
$(window).load(function() {
var $leftcontainer = $('.articleContainer'),
$rightcontainer = $('.printContainer'),
$body = $('body'),
colW = 100,
columns = null;
$leftcontainer.isotope({
itemSelector: '.article-box',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.article-sizer',
}
})
$rightcontainer.isotope({
itemSelector: '.article-box',
masonry: {
columnWidth: $rightcontainer.find('.printContainer')[0]
}
})
// On click, add article to the right section
$('.main-section').on( 'click', '.insert-button', function() {
var $item = $(this);
$rightcontainer.isotope( 'insert', $item );
$container.isotope('layout');
});
});
我不熟悉同位素,但看起来它利用了 jQuery 的 append() 函数。 Jquery 的 append() 获取一个元素并将其从其当前父级中删除,并将其添加到您的新父级中。
尝试在追加之前克隆您的元素。这应该对您的元素进行深度复制,然后附加该副本。
var $item = $(this).clone();
我想在右栏 ($rightcontainer) 中点击我的一篇文章。但是,我没有看到任何允许您复制项目而不是简单地移动它的同位素选项。 是否可以将我的项目保留在左栏($leftcontainer)中,同时将其添加到右侧? 谢谢你的帮助!
$(window).load(function() {
var $leftcontainer = $('.articleContainer'),
$rightcontainer = $('.printContainer'),
$body = $('body'),
colW = 100,
columns = null;
$leftcontainer.isotope({
itemSelector: '.article-box',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.article-sizer',
}
})
$rightcontainer.isotope({
itemSelector: '.article-box',
masonry: {
columnWidth: $rightcontainer.find('.printContainer')[0]
}
})
// On click, add article to the right section
$('.main-section').on( 'click', '.insert-button', function() {
var $item = $(this);
$rightcontainer.isotope( 'insert', $item );
$container.isotope('layout');
});
});
我不熟悉同位素,但看起来它利用了 jQuery 的 append() 函数。 Jquery 的 append() 获取一个元素并将其从其当前父级中删除,并将其添加到您的新父级中。
尝试在追加之前克隆您的元素。这应该对您的元素进行深度复制,然后附加该副本。
var $item = $(this).clone();