Draggable Kanban Boards In Vanilla JavaScript – jKanban

Category: Javascript , Recommended | August 21, 2020
Author: riktar
Views Total: 857 views
Official Page: Go to website
Last Update: August 21, 2020
License: MIT

Preview:

Draggable Kanban Boards In Vanilla JavaScript – jKanban

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:

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

You Might Be Interested In:


Leave a Reply