Search code examples
javascriptlayoutactionscriptflex4gridster

How to make a Tile/Grid layout like Gridster.js in AS3?

I want to make a custom layout which behaves like this shown in picture below.

I have already tried Tile Layout and to modify its calculateDropIndex method but not get desired behavior.

Tile layout works well when all the tiles are of same height and width but in my case tile size are different.

http://gridster.net/

enter image description here Gridster layout screenshot

Solution

  • After a little bit more try i am able make a gridster like drag n drop gird component.

    here is a brief summery of how i have made this component. while adding pods in to container add one more pod at the same position and keep it's visibility off. this extra node will be our drop indicator. keep all the original nodes in one array say nodes, and all extra nodes in another array say dropIndicators.

    for example if add nodes A, B and C in the container. we will add three extra nodes X, Y and Z respectively one for each main node.

    and over nodes array will be 

    node[0] = A;
node[1] = B;
node[2] = C;

    and dropIndicators array will be

    dropIndicators[0] = X;
dropIndicators[1] = Y;
dropIndicators[2] = Z;

    now you will need following function to update nodes position when we drag any node.

    1. CalculateDropLocation - to calculate new drop location while dragging.
    2. CheckCollision - to check collision between two nodes.
    3. FixCollision - if there is a collision we will fix the collision using this function. this function will mode all the colliding nodes downwards recursively.
    4. updateNodes - once the collision is fixed we will update all the nodes using this function. this function will move node upward if there is an empty space.

    now when we start dragging A node calculate new drop location for A node and move it's relative extra node i.e. X to the new drop location, check if X is colliding with any other extra node. we will use the dropIndicators array in all the functions. if collistion than call fixCollision() function, than call update node function.

    and at the end once all the nodes are updated set the position of all the extra nodes to it's original nodes i.e. set X's position to A's position , Y's position to B and so on. while updating original nodes position you can use Move animation to move nodes smoothly in the container.

    hope this will help. using this method you can make this type of layout in any language.

    hope this will help.

    for more details and sample application with source visit this link

    http://usefulflexcomponents.blogspot.in/2015/12/blog-post.html