如何以这种方式使用 jQuery Quicksand 插件？答案

【问题标题】：How to use jQuery Quicksand plugin in this way?如何以这种方式使用 jQuery Quicksand 插件？
【发布时间】：2012-11-04 05:41:48
【问题描述】：

演示看起来很简单，当我单击按钮时它只是动画一次。问题是：如何将“destination”再次更改为“source”？（应该有两组项）

Javascript：

$('#source').quicksand( $('#destination li') );

HTML：

<ul id="source">
    <li data-id="iphone">iPhone OS</li>
    <li data-id="android">Android</li>
    <li data-id="winmo">Windows Mobile</li>
</ul>

<ul id="destination" class="hidden">
    <li data-id="macosx">Mac OS X</li>
    <li data-id="macos9">Mac OS 9</li>
    <li data-id="iphone">iPhone OS</li>
</ul>

【问题讨论】：

如果你只想使用单个列表然后过滤，看看下面的例子 -> razorjack.net/quicksand/demos/one-set-clone.html

标签： jquery quicksand

【解决方案1】：

这是您正在寻找的魔法代码：

function doQuicksand(){

var newDestination = $('#source').clone();
$('#source').quicksand( $('#destination li') , function(){

$('#source').attr("id","tempSource");
$('#destination').replaceWith(newDestination);
$('#source').attr("id","destination").css("display","none");
$('#tempSource').attr("id","source");

});

}

基本上是因为流沙似乎将源替换为目标，因此在您通常运行后，源和目标最终都具有相同的内容。这段代码所做的是预先复制源代码，然后在流沙完成其工作后将其注入。

【讨论】：