hn-kanbanboard  

JavaScript library help you to build and manage a Kanban Board easily in your project, no jQuery required

Demo

https://hasannaser.github.io/HN-kanbanboard/index.html

Getting Started

Install via command line using npm.

npm install hn-kanbanboard-npm

Or

Clone the repo and use the javascript and the css files in the dist folder.

include css file

 <link rel="stylesheet" href="../dist/hn_kanbanboard.css"> 

include js file

 <script src="../dist/hn_kanbanboard.js"></script> 

---

Usage

<div id="myDiv">

</div>

let cards_ = [
    {"board_id": "1", "card_id": "1", "card_title": "Hello People" },
    {"board_id": "2", "card_id": "2",  "card_title": "Hello People" },
    {"board_id": "3", "card_id": "4", "card_title": "Hello People"}, 
];

var knbn = HN_kanbanTable({
    container: "#myDiv",
    lists:  [{"id": "1", "title": "Todo"}, {"id": "2", "title": "Doing"}, {"id": "3", "title": "Done"}],
    cards: cards_,
    onCardAdd: function (data) {
        //data.boardId,
        //data.title,
        console.info(data);
    },
    onCardDrgStart: function (evt) {
        //evt.currentList   :current list
        //evt.cardSelf      :card element
        console.info(evt)
    },
    onCardDrgEnd: function (evt) {
        //evt.listTo           : target list
        //evt.boardFrom       : previous list
        //evt.oldIndex        : element's old index within old parent
        //evt.newInde         : element's new index within new parent
        //evt.cardSelf        : card element
        console.info(evt)
    },
    onCardSortChange: function (evt) {
        //evt.currentList     :current list
        //evt.oldIndex        : element's old index within old parent
        //evt.newInde         : element's new index within new parent
        //evt.cardSelf        : card element
        console.info(evt)
    },
    onCardClick: function (data) {
        //data.title,
        //data.currentListId,
        //data.currentList,
        console.info(data);
    }
});

knbn.init();

Thanks

hn-kanbanboard use sortablejs for drag&drop

License

hn-kanbanboard is OpenSource and licensed under the Terms of Mozilla Public License 2.0. You're welcome to contribute