How to use jQuery Quicksand plugin in this way?

Question

The demo looks simple,and it just animate one time when I click the button. The question is:How can I change "destination" to "source" again?(It should have two sets of items)

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>

If you just want to use a single list and then filter, have a look at the following example -> http://razorjack.net/quicksand/demos/one-set-clone.html — Manse, Nov 15 '12 at 15:47

score 0 · Answer 1 · answered Jan 23 '13 at 16:38

This is the magic code you're looking for:

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");

});

}

Basically because quicksand seems to replace the source with the destination you end up with both the source and destination having the same contents after you run it usually. What this code does is copy the source beforehand and then it injects it back in after quicksand has done its stuff.

How to use jQuery Quicksand plugin in this way?

1 Answers1