Jquery Quicksand resorting elements based on html5 data attributes

Question

Please check out my code here

http://jsfiddle.net/k6FZz/2/

So I have some html elements in a page, with 4 different data-sort attributes, which are integers.

I also have 4 sort buttons, sort1, sort2, and etc, I want to sort those html elements according to the button that was clicked, so if sort1 was clicked, those elements should be reordered in the page using data-sort1 attributes,

Values are being sorted properly, the only thing is that I wanna use quicksand a jquery plugin to have a smoother reordering look.

I'm using this example of quicksand to accomplish that

http://razorjack.net/quicksand/demos/one-set-clone.html

But when I do

container.quicksand(values, {
  duration: 800,
  easing: 'easeInOutQuad'
});

A strange error message appears

"Uncaught TypeError: Object #<Object> has no method 'cloneNode'"

My initial guess was that this could be because of file inclusions or something, but everything seems fine,

so any ideas on what I'm doing wrong?

Answer 1

I haven't used QuickSand before but looking at their documentation, it looks like the first parameter is supposed to be a jQuery Object and not an array.

The problem is probably happening because QuickSand is trying to call the jQuery clone() method on your values array.

If you change your code to use something more like the following it should work:

container.quicksand($('#items div'), {
  duration: 800,
  easing: 'easeInOutQuad'
});