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
I love this….Thanks for posting…
Is there any help that you can provide with placing the images in the rectangle. That would help me out alot as this code is exactly what i needed.
I love this….Thanks for posting…
Is there any help that you can provide with placing the images in the rectangle. That would help me out alot as this code is exactly what i needed.
i couldn’t figure out how to place images in the rectangle either. please help!! this is exactly what i need!! thanks in advance! i love your website!! it’s awesome!!
Hey Justin,
First off this is a really fantastic little tid-bit of code.
I was curious though… I have a situation where I only have 1 column and rows that may be of different sizes. Is there a way to get around having to use _rowHeight when calculating the current cell? I thought about using the _currentItem, but then if a row above that one is smaller the cell will report back too early (before getting to the row it will report that it has already got there).
I hope that makes sense and that you possibly have a quick fix. (I saw what you mentioned above, but I think I don’t know your code well enough yet to figure that bad boy out).
Wicked.
Just completed a reorderable row of cells of my own, then thought “this would be cool as a grid!”, and wondered what what out there already. Typed in “AS3 shuffle grid”, and here we are!
Going to check it out now
:D
Mainly, love it.
Can think of a couple of improvements though:
1) Don’t force users to extend from ShuffleGridItem. Either have items implement an interface, say iShuffleable, or just ensure that a DisplayObject is passed. Otherwise, if their items are already extending another class, they can’t use the
2) restrict dragging to the grid area using a bounds object on startDrag(), and remove the onItemRelease() handler when you mouseOut of an item by dragging too far
Nice, surprisingly clean, class though!
I’m just working on having unshuffleable items, for example the job I’ve literally just finished we needed a timeline of video items, but we always had the last 2 items fixed. Was easy at the end of a 1D row but will be interesting to see how it works in 2D!
Cheers,
Dave
Really cool piece of code… I understand a bit of Flash, but my action script knowledge is really bad.
Maybe you could give as some instructions how to add images to the demo version?
Preferably I would like to load all the images by xml. Maybe your flickr demo here could be of some help?
Hope to hear from you !
Cheers !
great job!
Hi
How can i access the current position of each item? it seems as if getItemAtPosition and getItemAt always return the same values.
after after re-ordering, i am trying to loop over the grid and find the current position or index of each item.
thanks
lm
Hello,
I tried to tweek al little the code so that each shufflegrid item grows bigger on each rollover and back to normal on the rollout event. The shufflegrid behaves very very very abnormally. Any ideas why is that so, or how can I fix that issue?
Thank you, very nice class indeed!
Great tool! But one bug I noticed is that if you click on a tile, then drag it with your mouse quickly, the tile drops.
Ooh shoot i just typed a big comment and as soon as i hit reply it come up blank! Please tell me it worked properly? I do not want to write it again if i dont have to! Either the blog glitced out or i am just stuipd, the second option doesnt surprise me lol.