Draggable Kanban Boards In Vanilla JavaScript – jKanban

Preview:

Description:

jKanban is a vanilla JavaScript kanban library to manage your works, jobs, tasks, and any other types of events in categorized kanban boards.

You can move work items between kanban boards with drag and drop based on dragula.js library.

See Also:

• Draggable Kanban Board App With jQuery And Bootstrap

How to use 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 on your kanban.

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

5. Determine whether to show an Add button inside each 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 options.

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 functions.

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 methods.

// 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);

Changelog:

v1.3.1 (12/01/2020)

• code clean and build

v1.3.0 (12/01/2020)

• Item Options edited