Dragifiers

Algorithms

What are dragifiers?

Dragifiers are algorithms, that are specifying the way how grid is processing draggable items. Gridifier ships with two types of dragifiers: item intersection and grid discretization. Both dragifiers are supporting multi-touch item drags on touch devices.

Intersection dragifier

How Gridifier is processing grid items with intersection algorithm?

• Drag is triggered when draggable item is intersecting any grid item center point.
• Draggable and intersected item are exchanging their positions.
• Grid reposition is triggered.
• Intersection algorithm works both with enabled/disabled item intersections.
• Intersection algorithm works with enabled sortDispersion.

Reposition queue notices

• Gridifier is disabling reposition queue during intersection algorithm drags.
• So, this operation will lock browser thread until grid reposition finish.
• This locks will be not noticeable on grids with average items count.(<= 100)
• This is required, because with queue usage Gridifier will not register all interactions on fast drags.
• Alternatively, you can use grid discretization algorithm on grids with big items count.(> 100)

Discretization dragifier

How Gridifier is processing grid items with discretization algorithm?

• On drag start all grid is splitted to equal 'cells'.
• Drag is triggered when draggable item is intersecting at least one new cell.
• Draggable item is aligned according to new intersected cells.
• Grid reposition is triggered. All items are placed around draggable item.
• Draggable item position remains 'static' until grid reposition end.

Notice.
Actually discretization algorithm allows to place draggable item in any grid cell. After that, other items are placed 'around' draggable item.

Notices

• Discretization algorithm works only with enabled item intersections.
• Discretization algorithm works only with enabled sortDispersion.
• This algorithm will be especially helpful on grids with big items count.(> 100)

Usage

Let's look at simplified example of Gridifier usage in dragifier demo grids:

var grid = new Gridifier(demoGrid, {
    // To enable dragifier, pass dragifier: true option.
    // By default, intersection(dragifierMode: "i") algorithm will be used.
    dragifier: true,

    // By default, grid item will be used as drag handler.
    // You can use custom grid item child class name as drag handler as well:
    // dragifier: "handler-class"

    sortDispersion: true,
    // Per second demo discretization algorithm is used:
    // dragifierMode: "d"

    // Without 'drag' setting default drag styler will be used("cloneCss").
    // (Read drag stylers chapter, cloneCss can produce delay on items with many childs)
});
        

TouchClickEvent.listen(enableDragsButton, function() {
    grid.dragifierOn(); // Enable item drags
});

TouchClickEvent.listen(enableToggleButton, function() {
    grid.dragifierOff(); // Disable item drags
);

TouchClickEvent.listen(grid, ".gridItem", function(event) {
    if(grid.isDragifierOn())
        return;

    grid.toggleCss(event.target, "big-grid-item");
});
        

Dragifier settings:

Dragifier functions: