Drag stylers

Draggable item

What is happening with draggable item after drag start?

1. Draggable item is cloned and appended to body.
2. Special API function named 'drag' is called.
3. You can style draggable item as you want inside that function.
4. This method was chosen to simplify multi-grid drags implementation in future.
5. Draggable item clone will be deleted after drag end.

var grid = new Gridifier(demoGrid, {
    // Without drag setting "cloneCss" styler will be used by default
    drag: function(clone) {
        // Style item clone here
    }
});
        

'cloneCss' styler

By default, Gridifier is using built-in 'cloneCss' decorator. Basically, after sizes re-resolving, it loops through all computed styles and copies them to draggable item clone.

'cloneCss' styler limitations

• 'cloneCss' decorator copies styles recursively per all item childs.
• So, it's performance depends on grid item child nodes count.
• In most browsers up to 10-15 child nodes styles can be copied in reasonable time.(< 50ms)
• Things are worse in IE - even in IE11 item with 1-2 childs could produce delay on drag start.(~300ms)
• So, if you are supporting IE or are dragging items with many childs use method described in next section instead.

Fast css styler

Because of 'cloneCss' limitations the recommended way to decorate item clone is duplicating CSS rules per draggable item at body tag level, so they will be applied to draggable item clone.

/* You can add some unique name to clone to avoid polluting namespace */
.some-grid .draggable-item, body.some-grid-draggable-clone {
    /* item styles here... */
}

/* If you are using SASS(and probably you are), use @at-root directive */
.some-grid
    @at-root .some-grid-draggable-clone, & .draggable-item
       /* item styles here... */
        

var grid = new Gridifier(someGrid, {
    "class": "draggable-item",

    // Passing drag param as function will make it selected by default.
    drag: function(clone) {
        // Add class to clone here through the library you use:
        // someLib.addClass(clone, "some-grid-draggable-clone");
        // jQuery - $(clone).addClass("some-grid-draggable-clone");
    }
});
        

Custom stylers

Sometimes you may want to style draggable item clone in some special way.

How to select/pass built-in/custom styler?

var grid = new Gridifier(targetGrid, {/* Pass stylers here or build custom version */});
grid.drag('stylerName');
        

var grid = new Gridifier(targetGrid, {
    // Styler also can be passed as single function
    // (Will be enabled by default and available with name "userfn")
    drag: function(clone) { /* Decorate item clone here */ }
});

grid.drag("cloneCss");
grid.drag("userfn"); // You can select it later by "userfn" name
        

var grid = new Gridifier(targetGrid, {
    // Styler can be passed as object with function name/function pairs
    drag: {
        // You can set initial used function with 'selected' param
        selected: "firstStyler", // ('cloneCss' styler will be enabled by default)

        firstStyler: function(clone) { /* Style item clone here */ },
        secondStyler: function(clone) { /* Style item clone here */ },
        // ... More functions
    }
});

grid.drag("secondStyler"); // You can switch stylers later
        

// Extend src/api/settings.js class and build custom version with Grunt
var Settings = function() {
    this._settings = {
        // ...
        drag: {
            // Define your custom drag fn inside sort object
            customStyler: function(clone) {
                // Style item clone here
            }
        },
        // ...
    };
};
var grid = new Gridifier(targetGrid, {drag: "customStyler"});
        

Style pointer

With dragifier discretization algorithm intersected by draggable item cells are highlighted with pointer. You can control pointer style with 'gridifier-drag-pointer' class:

.someGrid .gridifier-drag-pointer {
    background: none !important;
}