Need help with jkanban?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Global Rank
#66,488
Topics of expertise
Github
Location
Italy
600 Stars 183 Forks Apache License 2.0 122 Commits 10 Opened issues

Description

Vanilla Javascript plugin for manage kanban boards

Services available

!
?

Need anything else?

Contributors list

No Data

jKanban

Javascript plugin for Kanban boards

jKanban allow you to create and manage Kanban Board in your project!

Please try out the live demo!

GET SUPPORT / REQUIRE CUSTOM FEATURE

jKanban

Install

Clone the repo and use the javascript and the css files in the

dist
folder.

You have to include



and



in your page and you are done.

Usage

Init jKanban is a piece of cake!

var kanban = new jKanban(options)

Here's an overview of the default values.

js
var kanban = new jKanban({
    element          : '',                                           // selector of the kanban container
    gutter           : '15px',                                       // gutter of the board
    widthBoard       : '250px',                                      // width of the board
    responsivePercentage: false,                                    // if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoard
    dragItems        : true,                                         // if false, all items are not draggable
    boards           : [],                                           // json of boards
    dragBoards       : true,                                         // the boards are draggable, if false only item can be dragged
    addItemButton    : false,                                        // add a button to board for easy item creation
    buttonContent    : '+',                                          // text or html content of the board button
    itemHandleOptions: {
        enabled             : false,                                 // if board item handle is enabled or not
        handleClass         : "item_handle",                         // css class for your custom item handle
        customCssHandler    : "drag_handler",                        // when customHandler is undefined, jKanban will use this property to set main handler class
        customCssIconHandler: "drag_handler_icon",                   // when customHandler is undefined, jKanban will use this property to set main icon handler class. If you want, you can use font icon libraries here
        customHandler       : "+ %s"// your entirely customized handler. Use %s to position item title
    },
    click            : function (el) {},                             // callback when any board's item are clicked
    dragEl           : function (el, source) {},                     // callback when any board's item are dragged
    dragendEl        : function (el) {},                             // callback when any board's item stop drag
    dropEl           : function (el, target, source, sibling) {},    // callback when any board's item drop in a board
    dragBoard        : function (el, source) {},                     // callback when any board stop drag
    dragendBoard     : function (el) {},                             // callback when any board stop drag
    buttonClick      : function(el, boardId) {}                      // callback when the board's button is clicked
})

Now take a look to the

boards
object
js
[
    {
        "id"    : "board-id-1",               // id of the board
        "title" : "Board Title",              // title of the board
        "class" : "class1,class2,...",        // css classes to add at the title
        "dragTo": ['another-board-id',...],   // array of ids of boards where items can be dropped (default: [])
        "item"  : [                           // item of this board
            {
                "id"    : "item-id-1",        // id of the item
                "title" : "Item 1"            // title of the item
                "class" : ["myClass",...]     // array of additional classes
            },
            {
                "id"    : "item-id-2",
                "title" : "Item 2"
            }
        ]
    },
    {
        "id"    : "board-id-2",
        "title" : "Board Title 2"
    }
]
WARNING: all ids are unique!

About custom properties

jKanban also support custom properties on items to improve your applications with html data- properties. You can define them at like:

js
[
    {
        "id"    : "board-id-1",
        "title" : "Board Title",
        "item"  : [
            {
                "id"      : "item-id-1",
                "title"   : "Item 1",
                "username": "username1"
            },
            {
                "id"      : "item-id-2",
                "title"   : "Item 2",
                "username": "username2"
            }
        ]
    }
]
Which jKanban will convert to:
html
Item 1
Item 2

API

jKanban provides the easiest possible API to make your boards awesome!

Method Name

Arguments Description

addElement
|
boardID, element
| Add
element
in the board with ID
boardID
,
element
is the standard format
addForm
|
boardID, formItem
| Add
formItem
as html element into the board with ID
boardID
addBoards
|
boards
| Add one or more boards in the kanban,
boards
are in the standard format
findElement
|
id
| Find board's item by
id
replaceElement
|
id, element
| Replace item by
id
with
element
JSON standard format
getParentBoardID
|
id
| Get board ID of item
id
passed
findBoard
|
id
| Find board by
id
getBoardElements
|
id
| Get all item of a board
removeElement
|
id
| Remove a board's element by id
removeBoard
|
id
| Remove a board by id

Example

Clone the repo and look in the

example
folder

Thanks

jKanban use dragula for drag&drop

Develop

Clone the repo then use

npm install
for download all the dependencies then launch
npm run build
for build the project

Pull Requests?

I'd love them!

Comments?

Let's hear them! (The nice ones please!)

Me?

In case you're interested I'm @riktarweb

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.