хороший пример использования jquery для достижения канбана - ссылка пера
используемая библиотека jkanban
var KanbanTest = new jKanban({
element : '#myKanban',
gutter : '10px',
click : function(el){
//alert(el.innerHTML);
// alert(el.dataset.eid)
},
boards :[
{
'id' : '_todo',
'title' : 'To Do (drag me)',
'class' : 'info',
'item' : [
{
'id':'task-1',
'title':'Try drag me',
},
{
'id':'task-2',
'title':'Click me!!',
}
]
},
{
'id' : '_working',
'title' : 'Working',
'class' : 'warning',
'item' : [
{
'title':'Do Something!',
},
{
'title':'Run?',
}
]
},
{
'id' : '_done',
'dragTo' : ['_working'],
'title' : 'Done (Drag only in Working)',
'class' : 'success',
'item' : [
{
'title':'All right',
},
{
'title':'Ok!',
}
]
}
]
});
var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener('click',function(){
KanbanTest.addElement(
'_todo',
{
'title':'Test Add',
}
);
});
var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener('click', function () {
KanbanTest.addBoards(
[{
'id' : '_default',
'title' : 'Default (Can\'t drop in Done)',
'dragTo':['_todo','_working'],
'class' : 'error',
'item' : [
{
'title':'Default Item',
},
{
'title':'Default Item 2',
},
{
'title':'Default Item 3',
}
]
}]
)
});
var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener('click',function(){
KanbanTest.removeBoard('_done');
});
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}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
<link href="https://www.riccardotartaglia.it/jkanban/dist/jkanban.min.css" rel="stylesheet"/>
<script src="https://gitcdn.xyz/repo/riktar/jkanban/master/dist/jkanban.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>jKanban</h1>
<p>jKanban allow you to create and manage Kanban Board in your project! Try It!</p>
<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">Add "Default" board</button>
<button class="btn btn-success" id="addToDo">Add element in "To Do" Board</button>
<button class="btn btn-danger" id="removeBoard">Remove "Done" Board</button>
</div>
</div>
</div>