what is the algorithm for updating tile position in Gridster.js

Question

Gridster.js allows to drag and drop tiles of variable size and rearrange tiles as we drag one tile.

Does anyone know the algorithm for rearranging the tiles?

I want to make this type of grid layout in action script and I am not much familiar with Javascript, I have already tried to read the code but don't understand most of the things, so if someone can give me the algorithm I will try to implement logic using action script.

Answer 1

i tired a little bit more and made a grid layout as per my requirement.

here is a demo link

i'll try to write an abstract algorithm for updating this type of tile layout,

As the time Drag is Started:

1. Calculate new drop location for the dragged item and move the drag item to the new location.
2. Check if their is any collision after moving.
3. if collision , fix the collision(i.e. move the collision tile down) go to step 2.
4. Update other tiles positions.(i.e check if any tile can be move upward if free space is available)