O jKanban é um js kanban plugin que permite criar quadros de tarefas (Kanban boards) diretamente em aplicações web com apenas JavaScript e CSS. Leve, eficaz e facilmente customizável, ele é uma excelente escolha para desenvolvedores que buscam flexibilidade com mínimo esforço.
O que é o jKanban?
O jKanban é um JavaScript plugin para quadros Kanban originais, mantido no GitHub. Não exige frameworks como React ou Vue — funciona com JS puro e é compatível com jQuery. Sua licença Apache‑2.0 garante uso livre para projetos pessoais e comerciais.
Vantagens de usar o jKanban
As vantagens são inúmeras, mas abaixo listamos algumas para você utilizar esse repositório para criar um kanban de forma fácil, rápida e leve!
Leve e sem dependências
Basta importar dois arquivos — jkanban.min.css e jkanban.min.js — para configurar totalmente o plugin.
Drag & drop intuitivo
Permite movimentar cartões entre colunas, definir regras de arraste, conter eventos como clique nos itens e criação dinâmica de elementos
Totalmente customizável
Você pode configurar espaçamentos, cores, largura das colunas, comportamento dos cards, e integração com APIs via JSON RESTful
Como instalar e usar o jKanban
1. Instalação e setup
Entre na url: https://github.com/riktar/jkanban e baixe ou clone o repositório do jKanban:
Para baixar você pode:
- Baixar via GIT com
git clone https://github.com/riktar/jkanban.git - Baixando o arquivo em ZIP
- Ou ainda abrindo e clonando diretamente pelo GitHub Desktop.
2. Importando nos seus projetos
Para utilizar em seus projetos, você deve importar o .css e o .js, como demonstrado a seguir:
Inicio do código ...
<head>
<link rel="stylesheet" href="pasta/do/jkanban.min.css">
<script src="pasta/do/jkanban.min.js"></script>
</head>
Resto do código...Substitua o pasta/do para a pasta que se encontram esses dois arquivos e pronto, seu código está pronto para utilizar o jKanban em seu projeto.
3. Como criar um novo Kanban no seu projeto
Para criar um novo kanban no seu projeto é muito simples, você precisa criar uma div que será utilizada para iniciar o kanban:
<div id="meuKanban"></div>e então setar esse novo kanban no javascript da página:
<script>
var kanban = new jKanban({
element: '#meuKanban',
gutter: '10px',
widthBoard: '250px',
boards: [
{ id: '_todo', title: 'Pendente', item: [{ title: 'Tarefa 1' }] },
{ id: '_doing', title: 'Em desenvolvimento', item: [] },
{ id: '_done', title: 'Concluido', item: [] }
]
});
</script>Como pudemos observar acima, esse kanban tem 3 colunas, a Pendente, Em desenvolvimento e Concluido. Você pode adicionar mais ou menos, de acordo com suas necessidades, para customizar você pode:
Customizando
Você pode ajustar:
gutter: espaçamento entre colunas.widthBoard: largura de cada coluna.dragTo: de onde pode-se arrastar itens.click,dropEl,dragEl: eventos para hooks.
E muito mais, no próximo tópico, estarei deixando todas as opções e valores que podem ser customizados no jKanban.
4. Customizando seu Kanban
Aqui está uma visão geral dos valores padrão:
var kanban = new jKanban({
element : '', // seletor do contêiner kanban
gutter : '15px', // gutter do board
widthBoard : '250px', // largura do board
responsivePercentage: false, // se for verdade eu uso porcentagem na largura das placas e não é necessário gutter e widthBoard
dragItems : true, // se falso, todos os itens não são arrastáveis
boards : [], // json dos boards (aqui vão os itens do board)
dragBoards : true, // os quadros são arrastáveis, se for falso, apenas o item pode ser arrastado
itemAddOptions: {
enabled: false, // adicione um botão ao quadro para facilitar a criação de itens
content: '+', // texto ou conteúdo html do botão do board
class: 'kanban-title-button btn btn-default btn-xs', // classe padrão do botão
footer: false // posicionar o botão no rodapé
},
itemHandleOptions: {
enabled : false, // se o identificador do item do board está habilitado ou não
handleClass : "item_handle", // classe css para seu identificador de item personalizado
customCssHandler : "drag_handler", // quando customHandler não estiver definido, o jKanban usará esta propriedade para definir a classe do manipulador principal
customCssIconHandler: "drag_handler_icon", // Quando customHandler estiver indefinido, o jKanban usará esta propriedade para definir a classe principal do manipulador de ícones. Se desejar, você pode usar as bibliotecas de ícones de fontes aqui.
customHandler : "<span class='item_handle'>+</span> %title% " // seu manipulador totalmente personalizado. Use %title% para posicionar o título do item
// qualquer valor de chave incluído na coleção de itens pode ser substituído por %key%
},
click : function (el) {}, // callback quando qualquer item do board é clicado
context : function (el, event) {}, // callback quando qualquer item do board é clicado com o botão direito
dragEl : function (el, source) {}, // callback quando qualquer item do board é arrastado
dragendEl : function (el) {}, // callback quando qualquer item do board finaliza o drag
dropEl : function (el, target, source, sibling) {}, // callback quando qualquer item do board é colocado em um board
dragBoard : function (el, source) {}, // callback quando qualquer board estiver sendo arrastado
dragendBoard : function (el) {}, // callback quando qualquer board for arrastado
buttonClick : function(el, boardId) {}, // callback quando qualquer botão do board for clicado
propagationHandlers: [], // o retorno de chamada especificado não cancela o evento do navegador. valores possíveis: "clique", "contexto"
})aqui está um exemplo completo de como é um objeto do board:
[
{
"id" : "board-id-1", // id do board
"title" : "Board Title", // titulo do board
"class" : "class1,class2,...", // classes css para adicionar no título
"dragTo": ['another-board-id',...], // conjunto de ids de quadros onde os itens podem ser arrastados(padrão: [])
"item" : [ // item deste board
{
"id" : "item-id-1", // id deste item
"title" : "Item 1" // titulo do item
"class" : ["myClass",...] // conjunto de classes adicionais
},
{
"id" : "item-id-2",
"title" : "Item 2"
}
]
},
{
"id" : "board-id-2",
"title" : "Board Title 2"
}
]
5. API
O jKanban fornece a API mais fácil possível para deixar seus boards incríveis!
| Nome do Método | Argumentos | Descrição |
|---|---|---|
addElement | boardID, element, position | Adicione um elemento ao quadro com ID boardID, o elemento é o formato padrão. Se a posição for definida, insere na posição a partir de 0. |
addForm | boardID, formItem | Adicione formItem como elemento HTML no quadro com ID boardID |
addBoards | boards | Adicione um ou mais quadros no kanban, os boards estão no formato padrão |
findElement | id | Encontra o item do board por id |
replaceElement | id, element | Substituir item por id com formato padrão JSON do elemento |
getParentBoardID | id | Obter ID do quadro do item enviado |
findBoard | id | Encontra o board por id |
getBoardElements | id | Obter todos os itens de um board |
removeElement | id | Remover um elemento do quadro pelo id |
removeBoard | id | Remover um board por id |
6. Finalização
Para rodar o projeto, em seu terminal rode o npm install para baixar todas as dependências e, em seguida, execute o npm run build para construir o projeto.
PS: é muito importante rodar o NPM, pois o projeto necessita de pacotes do dragula.
Estarei deixando um exemplo de uma página HTML que utiliza o jKanban para criar um exemplo com três colunas e um botão para adicionar novas tarefas, veja a seguir como na imagem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js kanban plugin</title>
<link rel="stylesheet" href="../dist/jkanban.min.css" />
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
/>
<script src="../dist/jkanban.min.js"></script>
<style>
.success {
background: #00b961;
}
.info {
background: #2a92bf;
}
.warning {
background: #f4ce46;
}
.error {
background: #fb7d44;
}
</style>
</head>
<body>
<div id="myKanban"></div>
<br />
<button id="addToDo">Adicionar elemento no board "To Do"</button>
<script>
var kanban = new jKanban({
element: '#myKanban',
gutter: '10px',
widthBoard: '300px',
boards: [
{
id: '_todo',
title: 'Para Fazer',
class: 'info',
item: [
{ title: 'Task 1' },
{ title: 'Task 2' }
]
},
{
id: '_inprogress',
title: 'Em Progresso',
class: 'warning',
item: [
{ title: 'Task 3' }
]
},
{
id: '_done',
title: 'Concluído',
class: 'success',
item: [
{ title: 'Task 4' }
]
}
]
});
// Criar quadro no To Do
var toDoButton = document.getElementById("addToDo");
toDoButton.addEventListener("click", function() {
kanban.addElement("_todo", {
title: "Test Add"
});
});
</script>
</body>
</html>O jKanban é um excelente js kanban plugin para desenvolvedores que desejam construir quadros Kanban customizados sem dependências complexas nem custos. Leve, flexível e com API simples, ele permite adicionar, remover e manipular colunas e cards com apenas algumas linhas de código.
Para projetos pequenos a médios, pessoalmente recomendo o jKanban por sua simplicidade e potência — e ainda totalmente gratuito. Experimente hoje mesmo em: GitHub – riktar/jkanban.
