Intersections

Vertical grid

Intersections:

Align:

Append:

Notice: (Both grid items are draggable with 'intersection' dragifier mode.)

Horizontal grid

Intersections:

Align:

Append:

Intersection types

How to select insersection algorithm?

By default, grid items can intersect each other vertically and horizontally any number of times. To change insersection algorithm use 'intersections' setting:

vertical grid
Any amount of items can intersect any other item horizontally.

horizontal grid
Any amount of items can intersect any other item vertically.

vertical grid
Only one item can intersect any other item horizontally.

horizontal grid
Only one item can intersect any other item vertically.

Notice.
If you will pass 'align' setting with any of available values, 'no' value of 'intersections' setting will be selected automatically.

How to dynamically change intersection type?

Aligns

How to select dynamic items alignment inside grid?

You can select one of the following types of alignment with vertical grids:

Following values are available with horizontal grids:

Notice.
If you will pass 'align' setting with any of available values, 'intersections' = 'no' will be selected automatically.

How to dynamically change alignment type?

var demoGrid = document.getElementById("#demo-grid");
var settings = {
    // This parameter can be omitted, if you are passing align param.
    // With false value, 'top' align per vertical grid
    // or 'left' align per horizontal grid will be used by default.
    intersections: true|false,

    // Passing this parameter enables noIntersections strategy.
    align: "top|center|bottom|left|right",

    // Usage of 'center|bottom|right' aligns can cause some
    // item 'jumps' on grid repositions in rare cases.(Explained in next section)
    // To fix it, you can increase reposition queue size:
    queueSize: 40
};

var grid = new Gridifier(demoGrid, settings);
        

// Enable intersections and retransform grid
grid.set("intersections", true).reposition();

// Disable intersections and retransform grid
grid.set("intersections", false).reposition();

// Select new alignment type and retransform grid
grid.set("align", "center").reposition();
        

No intersections

What should you know about no intersections mode?

• Gridifier is aligning items dynamically after each insert operation.
• So, no special parameters related to 'row'/'col' sizes are required to pass to Gridifier instance.
• No intersections mode supports dragifier with 'intersection' mode.
• No intersections mode with 'discretization' dragifier mode is restricted because of dynamic aligns nature.

Reposition queue side-effect

Why in some cases some items 'are jumping' before correct align?

• This can happen only when you are using 'center|bottom|right' align param.
• This can happen in delay between reposition queue batches reinsertion.
• If last element in current batch is not tallest(VG)/widest(HG) item in 'row'(VG)/'col'(HG), it is aligned according to current 'row'/'col' items.
• So, it will be re-aligned after tallest/widest item reinsert in next batch after small delay.

So, the 'jump' happens because of dynamic aligns nature and queue-based kernel.

How to avoid jumps?

// ... Page code
var verticalGridDemo = new Gridifier(demoGrid, settings);

TouchClickEvent.listen(selectTopAlignButton, function() {
    // Jumps can't happen with default align value('top'),
    // so default value = 12 is enough
    verticalGridDemo.set("queueSize", 12).set("align", "top").reposition();
});

// Setting batchSize to 40 will be enough per most cases.
TouchClickEvent.listen(selectCenterAlignButton, function() {
    verticalGridDemo.set("queueSize", 40).set("align", "center").reposition();
}

TouchClickEvent.listen(selectBottomAlignButton, function() {
    verticalGridDemo.set("queueSize", 40).set("align", "bottom").reposition();
}
// ... Similiar code per horizontal grid demo