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?


Reposition queue notices


Intersection dragifier demo grid:

Sort dispersion:

true
false

Intersections:

yes
no

Interaction:

drag
toggle

Controls:

append 20
clear grid

Discretization dragifier

How Gridifier is processing grid items with discretization algorithm?


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

Notices


Discretization dragifier demo grid:

Interaction:

drag
toggle

Controls:

append 20
clear grid

Usage

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

Dragifier usage simplified example
demonstration of dragifier usage in 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)
});
        
Dynamic enabling/disabling dragifiers

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 setting
specifies, if items drags should be enabled on init, default = false
dragifierMode setting
specifies algorithm, which is used by dragifier kernel on drags, default = "i"

Dragifier functions:

dragifierOn()
dragifierOn = function()
dragifierOff()
dragifierOff = function()
isDragifierOn()
isDragifierOn = function()
next: Drag events prev: Repack sorts
Ξ
GRIDIFIER.IO
x