Preview

Documentation v1.0.4

jKanban is a pure agnostic Javascript plugin for Kanban boards. For more info see the official siteand the Github repository.

Restricted Example

Here's a restricted jKanban Board example, where only specific inner blocks can be placed into allowed columns. For more info, please visit the official website.
To Do
My Task Test
Buy Milk
Working
Do Something!
Run?
Done
All right
Ok!
Notes
Warning Task
Do not enter
"use strict";

// Class definition
var KTJKanbanDemoRestricted = function() {
    // Private functions
    var exampleRestricted = function() {
        var kanban = new jKanban({
            element: '#kt_docs_jkanban_restricted',
            gutter: '0',
            widthBoard: '250px',
            click: function(el) {
                alert(el.innerHTML);
            },
            boards: [{
                    'id': '_todo',
                    'title': 'To Do',
                    'class': 'light-primary',
                    'dragTo': ['_working'],
                    'item': [{
                            'title': 'My Task Test',
                            'class': 'primary'
                        },
                        {
                            'title': 'Buy Milk',
                            'class': 'primary'
                        }
                    ]
                },
                {
                    'id': '_working',
                    'title': 'Working',
                    'class': 'light-warning',
                    'item': [{
                            'title': 'Do Something!',
                            'class': 'warning'
                        },
                        {
                            'title': 'Run?',
                            'class': 'warning'
                        }
                    ]
                },
                {
                    'id': '_done',
                    'title': 'Done',
                    'class': 'light-success',
                    'dragTo': ['_working'],
                    'item': [{
                            'title': 'All right',
                            'class': 'success'
                        },
                        {
                            'title': 'Ok!',
                            'class': 'success'
                        }
                    ]
                },
                {
                    'id': '_notes',
                    'title': 'Notes',
                    'class': 'light-danger',
                    'item': [{
                            'title': 'Warning Task',
                            'class': 'danger'
                        },
                        {
                            'title': 'Do not enter',
                            'class': 'danger'
                        }
                    ]
                }
            ]
        });
    }

    return {
        // Public Functions
        init: function() {
            exampleRestricted();
        }
    };
}();

// On document ready
KTUtil.onDOMContentLoaded(function() {
    KTJKanbanDemoRestricted.init();
});
<div id="kt_docs_jkanban_restricted"></div>
Preview Get Help Buy Now