Press "Enter" to skip to content

[Draggable] Vanilla Javascript Plugin for Manage Kanban Boards | jKanban

jKanban is the kanban library with javascript vanilla to manage your business, jobs, tasks, and any other types of events in kanban categorized boards.

You can move work items between kanban panels by drag and drop based on the dragula.js library.

How to make use of it:

1. Insert the jKanban’s JavaScript and Stylesheet into the HTML file.

<link rel="stylesheet" href="./dist/jkanban.min.css" />
<script src="./dist/jkanban.js"></script>

2. Create a container to place the kanban boards.

<div id="myKanban"></div>

3. Create kanban boards in a JS array of objects as follows:

myBoards = [
  {
    id: "_todo",
    title: "To Do (Can drop item only in working)",
    class: "info,good",
    dragTo: ["_working"],
    item: [
      {
        id: "_test_delete",
        title: "Try drag this (Look the console)",
        drag: function(el, source) {
          console.log("START DRAG: " + el.dataset.eid);
        },
        dragend: function(el) {
          console.log("END DRAG: " + el.dataset.eid);
        },
        drop: function(el) {
          console.log("DROPPED: " + el.dataset.eid);
        }
      },
      {
        title: "Try Click This!",
        click: function(el) {
          alert("click");
        },
        class: ["peppe", "bello"]
      }
    ]
  },
  {
    id: "_working",
    title: "Working (Try drag me too)",
    class: "warning",
    item: [
      {
        title: "Do Something!"
      },
      {
        title: "Run?"
      }
    ]
  },
  {
    id: "_done",
    title: "Done (Can drop item only in working)",
    class: "success",
    dragTo: ["_working"],
    item: [
      {
        title: "All right"
      },
      {
        title: "Ok!"
      }
    ]
  }
]

4. Initialize the library to render the boards in your kanban.

var KanbanTest = new jKanban({
    element: "#myKanban",
    boards: myBoards
})

5. Determine whether or not to indicate an Add button inside every board.

var KanbanTest = new jKanban({
    element: "#myKanban",
    boards: myBoards,
    addItemButton: true,
    buttonContent: '+',
    buttonClick: function(el, boardId) {
      console.log(el);
      console.log(boardId);
      // create a form to enter element
      var formItem = document.createElement("form");
      formItem.setAttribute("class", "itemform");
      formItem.innerHTML =
        '<div class="form-group"><textarea class="form-control" rows="2" autofocus></textarea></div><div class="form-group"><button type="submit" class="btn btn-primary btn-xs pull-right">Submit</button><button type="button" id="CancelBtn" class="btn btn-default btn-xs pull-right">Cancel</button></div>';
      KanbanTest.addForm(boardId, formItem);
      formItem.addEventListener("submit", function(e) {
        e.preventDefault();
        var text = e.target[0].value;
        KanbanTest.addElement(boardId, {
          title: text
        });
        formItem.parentNode.removeChild(formItem);
      });
      document.getElementById("CancelBtn").onclick = function() {
        formItem.parentNode.removeChild(formItem);
      };
    },
})

6. More configuration choices.

var KanbanTest = new jKanban({

    // space between boards
    gutter: '15px',

    // board width
    widthBoard: '250px',

    // use percentage in the width of the boards
    responsivePercentage: false, 

    // make work items draggable?
    dragItems: true,
    
    // make boards draggable?
    dragBoards: true,

    // config item drag handle
    itemHandleOptions: {
      enabled: false, 
      customCssHandler "drag_handler",
      customCssIconHandler: "drag_handler_icon",
      customHandler: "+ %s"title
    }
    
})

7. Callback features.

var KanbanTest = new jKanban({

    click: function (el) {
      // when an item is clicked
    }, 

    dragEl : function (el, source) {
      // when an item is dragging
    },

    dragendEl: function (el) {
      // when an item stops dragging
    }, 

    dropEl: function (el, target, source, sibling) {
      // when an item is dropped
    }, 

    dragBoard: function (el, source) {
      // when a board is dragging
    },
    
    dragendBoard: function (el) {
      // when a board stops dragging
    }

})

8. API strategies.

// add an element
KanbanTest.addElement(boardID, element);

// add a form element
KanbanTest.addForm(boardID, formItem);

// add boards
KanbanTest.addBoards(boards);

// find item by ID
KanbanTest.findElement(id);

// replace item by id
KanbanTest.replaceElement(id);

// get parent board ID
KanbanTest.getParentBoardID(id);

// find board by ID
KanbanTest.findBoard(id);

// get board element by ID
KanbanTest.getBoardElements(id);

// remove an element by ID
KanbanTest.removeElementid(id);

// remove a board by ID
KanbanTest.removeBoard(id);

Draggable Kanban Boards, jKanban Plugin/Github


See Demo And Download

Official Website(riktar): Click Here

This superior jQuery/javascript plugin is developed by riktar. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *