jQuery Isotope - sort data by "group"

Question

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

Deed

I am sure we can work a more involved sort system, but you need to describe a bit better what you end-result should be. in your example you want elements prior to the clicked to remained unsorted ? (unless they are the same color ?) after a couple of clicks the whole table is grouped by type.. is that what you want (exactly as in your demo)? – Prehensile

Thanks for the comment. I essentially want to reposition elements of a group around the 'clicked' element of that group, while leaving the positions of elements of other groups intact. As in my demo, the end result would be the whole table grouped by type. – Deed

Answer 1

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

Photoreceptor

Thanks for the reply the fork works as you described, but I was attempting to preserve the clicked item's position while repositioning the remaining group items after the item (by modifying the DOM with .insertAfter) – Deed

Is it not already doing that? I made the clicked item blue to be more obvious - jsfiddle.net/wkMUr/3 the position stays the same while all the others of the group append after it: Or perhaps I'm still not quite getting what you're looking for? – Photoreceptor

Right you are...! Missed that somehow, guess it was just reloadItems rather then reLayout etc., thanks for the help! – Deed

Answer 2

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

Jezreel

It looks like Quick Sand doesn't show all of them and group them. It gets rid of the ones that aren't a part of the group. And I haven't used Quick Sand but it looks like about double, or more, the amount JS vs Isotope. – Agile