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
amazing work!
Excuse me for the stupid question, but I try figure out how can I get an items by its position on the grid. For example to call item at 1-st cell, or second, or items by its col and raw position. Please help!
Excellent post with the drag & drop shuffle grid menu systems. I really love it & inspired with this AS3 shuffle grid class.
Thx for sharing such an informative post with appropriate coding
Thank for your sharing source, it strongly helps to me.
I’ve found a bug in this class in function getPosition
Here’s the correct version:(Sorry if there is any code format inconvenience.)
private function getPosition(row : int, col : int) : Point
{
return new Point(col * (_rowSize + _padd), row * (_colSize + _padd));
}
too bad you version requies all slots to be full. something very unlikely in the in most applications. a little update would be very appreiated for those struggling to use your version
Really nice.Thanks for this.