Drag & Drop the images to shuffle them around…
A friend of mine, Dale Sattler over at No Ponies recently posted a grid sorting class. He said it was based on my old dynamic stacking menu; but that was pure modesty as his script is based on a 2D grid and much more sophisticated.
Anyway – it inspired me to create a grid sorting / shuffling algorithm of my own. It behaves differently to Dales but I think it works pretty well.
The basic logic of the algorithm works by determining how far a dragged item travels along the grid (rows and columns) and then shuffling the surrounding items in the opposite direction by these values, therefore creating space for the dragged item to slot into when released.
It currently only works for grids which are fully populated, but adding more flexibility for incomplete grids will only be a matter of adding a few conditions – functionality which I’ll add when I get a moment.
You can extend the ShuffleGridItem class to add the functionality you need. In the demo I’ve made a simple image class which grabs a photo from Flickr.
Creating a ShuffleGrid is very simple, and can be done like so:
var grid:ShuffleGrid = new ShuffleGrid(4,7,40,40,1);
for (var i : int = 0; i < grid.numCells; i++)
{
grid.addItem (new ShuffleGridItem());
}
addChild (grid);
The constructor takes the following arguments:
new ShuffleGrid(rows, cols, cellWidth, cellHeight, spacing);
Feel free to download the class and a simple demo and have a play around. I can imagine many uses for it, so hopefully it will come in handy.
Download: Shuffle Grid Class & Demo
Nice work here Justin, certainly much more elegant than my hack job!
Yummy.
Nice work indeed.
I love what you’ve done here. I would really like to find a way to integrate this with my Layout Organizers project.
Great work man.
wow, is very interesting.
Awesome work. How about support for scrolling ?
Thanks for sharing mate, very clever and useful.
What’s the license/copyright of this code, can I adapt it to my needs?
cheers
this is great, thanks for the inspiration and source
@P.J Definitely man! Perhaps we could work out a more flexible way to shuffle elements, which can be applied to all your layouts, similar to the [rows][cols] dictionary method I’m using in the grid. That way all the layouts could be rearranged an keep their basic ‘shape’. Love the idea!
@Emil How do you mean scrolling?
@Pedro Please feel free to adapt to your needs. As with most content on this site, I’ve released it under the Creative Commons 3 license, so go ahead and mix it up – just credit the author (me) where appropriate
fully awesome.
Dood, i met up with a client in morning who wanted something like this (if i can tweak it a little further)..I also tweeted about this post…Came out to be a perfect
featureBlend: AS 3.0 Shuffle Grid Class (Justin does it again, WOOT,WOOT!!!) http://tinyurl.com/bd8us8
You did it again Justin, very very nice!
Great project! And what can I do if I want to order elements with different width and height? I think that can be a good increase….