Shuffle Grid Demo

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
Posted on 04 Mar 2009
67 Comments
13 Trackbacks

Meta

AS3 Shuffle Grid Class was posted on March 4th 2009 in the category Code / Actionscript 3.0, Code, Flash, Lab, Open Source and tagged; , , , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

64 Responses to AS3 Shuffle Grid Class

1 4 5 6

Leave a Reply

Pingbacks / Trackbacks

  1. 7 years ago Bookmarks for March 5th from 15:03 to 15:06 « what i say // jon burger

    [...] AS3 Drag and Drop Shuffle Grid Menu Interface – [...]

  2. 7 years ago My First Game | PUBLIC SERVICE

    [...] soulwire’s Shufle Grid Class we present you PUZZLE NO [...]

  3. 7 years ago AntScript » 一个不错的效果收藏

    [...] 原文地址:http://blog.soulwire.co.uk/flash/flash-interfaces/as3-drag-drop-shuffle-grid-menu/#more-311 [...]

  4. 7 years ago Adobe — наш верный друг » AS3 Shuffle Grid Class — блог о air, flash, flex и других технологиях Adobe

    [...] делится своим видением области применения данной штуки. Можете поддержать [...]

  5. 6 years ago [Actionscript 3] Menu tipo iPhone con icone spostabili

    [...] ricerca.. ecco dove l’avevo visto noponies AS3 Drag Sort Grid Experiment e qui ce n’

  6. 6 years ago AnthemGDA » Blog Archive » 15 Detailed Expert Tutorials for ActionScript 3

    [...] 4. AS3 Shuffle Grid Class [...]

  1. vladimir 6 years ago

    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!

    Reply to this comment

  2. Prakash 6 years ago

    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

    Reply to this comment

  3. Byoung-Kwng 5 years ago

    Thank for your sharing source, it strongly helps to me.

    Reply to this comment

  4. zoruo 5 years ago

    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));
    }

    Reply to this comment

  5. antonio brandao 5 years ago

    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

    Reply to this comment

  6. Abhinov 5 years ago

    Really nice.Thanks for this.

    Reply to this comment

  7. og2t 2 years ago
1 3 4 5