<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <h1>jKanbanサンプル</h1>

            <a class="btn-xl btn btn-default" href="https://github.com/riktar/jkanban" target="_blank">Fork on GitHub</a>
         <hr>
         <div id="myKanban"></div>
         <button class="btn btn-success" id="addDefault">ボード追加</button>
         <button class="btn btn-success" id="addToDo">Todo追加</button>
         <button class="btn btn-danger" id="removeBoard">終わった作業を削除</button>
      </div>
   </div>
</div>

body{font-family: "Lato"; margin:0; padding: 0;}
#myKanban{overflow-x: auto; padding:20px 0;}

.success{background: #00B961; color:#fff}
.info{background: #2A92BF; color:#fff}
.warning{background: #F4CE46; color:#fff}
.error{background: #FB7D44; color:#fff}

var KanbanTest = new jKanban({
        element : '#myKanban',
        gutter  : '10px',
        click : function(el){
            alert(el.innerHTML);
        },
        boards  :[
            {
                'id' : '_todo',
                'title'  : 'To Do (ドラッグ&ドロップ)',
                'class' : 'info',
                'item'  : [
                    {
                        'title':'ドラッグで動かしたり',
                    },
                    {
                        'title':'クリックしてみたり',
                    }
                ]
            },
            {
                'id' : '_working',
                'title'  : '例の案件',
                'class' : 'warning',
                'item'  : [
                    {
                        'title':'進める',
                    },
                    {
                        'title':'後で動作テスト',
                    }
                ]
            },
            {
                'id' : '_done',
                'dragTo' : ['_working'],
                'title'  : '終わった作業',
                'class' : 'success',
                'item'  : [
                    {
                        'title':'コーディング',
                    },
                    {
                        'title':'見積もり',
                    }
                ]
            }
        ]
    });

    var toDoButton = document.getElementById('addToDo');
    toDoButton.addEventListener('click',function(){
        KanbanTest.addElement(
            '_todo',
            {
                'title':'追加されたTodo',
            }
        );
    });

    var addBoardDefault = document.getElementById('addDefault');
    addBoardDefault.addEventListener('click', function () {
        KanbanTest.addBoards(
            [{
                'id' : '_default',
                'title'  : '追加されたカボード',
                'dragTo':['_todo','_working'],
                'class' : 'error',
                'item'  : [
                    {
                        'title':'アイテム1',
                    },
                    {
                        'title':'アイテム2',
                    },
                    {
                        'title':'アイテム3',
                    }
                ]
            }]
        )
    });

    var removeBoard = document.getElementById('removeBoard');
    removeBoard.addEventListener('click',function(){
        KanbanTest.removeBoard('_done');
    });