Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Isotope - sort data by "group"

Using the Isotope plugin, I am trying to achieve a sorting system where, by clicking an item, groups are formed by positioning items of the same type after the clicked item.

Isotope's sort/filter functions don't seem designed for this purpose, so my initial approach was to rearrange the DOM using .insertAfter and then firing 'reLayout'.

However, it seems that after initialization the DOM order isn't relevant and nothing short of destroying and re-initializing Isotope works, but that causes undesirable scroll position jumps.

(See: http://jsfiddle.net/owenhoskins/r7MgY/10896/)

Is there are way to update Isotope based on DOM structure without a re-init?

Or, is it conceivable to interface with the sort/filter functions to achieve this aim?

Thanks in advance, Owen

like image 822
Owen Hoskins Avatar asked Dec 02 '11 15:12

Owen Hoskins


2 Answers

Try this instead (a forked fiddle) - Using the prepend method in the docs works for me, and doesn't jump.

like image 94
hejhi Avatar answered Oct 12 '22 12:10

hejhi


Would you consider using a different plugin to accomplish this? Take a look at: Quick Sand Its funcionality consists in replacing a collections of elements with another, much more simple than isotope in my opinion.

Here's an example similar to the result you want to get: Quick sort example

like image 22
gahius Avatar answered Oct 12 '22 13:10

gahius