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

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