jKanban是一款專為創建和管理看板系統而設計的JavaScript插件，它基於dragula拖放庫，提供了流暢的拖拽體驗和高度可定製的功能。

項目概述

jKanban允許開發者在項目中快速構建功能完整的看板系統，支持多列布局、拖拽操作和響應式設計。通過簡單的配置即可實現複雜的任務管理功能。

安裝方法

克隆項目倉庫並使用dist文件夾中的JavaScript和CSS文件：

git clone https://gitcode.com/gh_mirrors/jk/jkanban

在頁面中引入必要的文件：

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

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

基礎配置

初始化jKanban非常簡單，以下是一個完整的配置示例：

var kanban = new jKanban({
    element: "#myKanban",                    // 看板容器選擇器
    gutter: "15px",                          // 看板間距
    widthBoard: "250px",                     // 看板寬度
    responsivePercentage: false,             // 是否使用百分比寬度
    dragItems: true,                         // 項目是否可拖拽
    boards: [],                              // 看板數據
    dragBoards: true,                        // 看板是否可拖拽
    itemAddOptions: {
        enabled: false,                       // 是否啓用添加按鈕
        content: '+',                        // 按鈕內容
        class: 'kanban-title-button btn btn-default btn-xs', // 按鈕樣式類
        footer: false                        // 按鈕位置
    },
    click: function (el) {},                 // 項目點擊回調
    context: function (el, event) {},        // 項目右鍵回調
    dragEl: function (el, source) {},        // 項目拖拽開始回調
    dragendEl: function (el) {},             // 項目拖拽結束回調
    dropEl: function (el, target, source, sibling) {}, // 項目放置回調
    dragBoard: function (el, source) {},     // 看板拖拽開始回調
    dragendBoard: function (el) {},          // 看板拖拽結束回調
    buttonClick: function(el, boardId) {}     // 按鈕點擊回調
})

看板數據結構

看板數據採用JSON格式，支持豐富的配置選項：

[
    {
        "id": "board-id-1",                  // 看板唯一標識
        "title": "Board Title",               // 看板標題
        "class": "class1,class2,...",       // 看板CSS類名
        "dragTo": ['another-board-id',...],  // 允許拖放的目標看板
        "item": [                            // 看板中的項目
            {
                "id": "item-id-1",             // 項目唯一標識
                "title": "Item 1",            // 項目標題
                "class": ["myClass",...]      // 項目CSS類名
            }
        ]
    }
]

自定義屬性支持

jKanban支持在項目中添加自定義屬性，這些屬性會轉換為HTML的data屬性：

[
    {
        "id": "board-id-1",
        "title": "Board Title",
        "item": [
            {
                "id": "item-id-1",
                "title": "Item 1",
                "username": "username1"      // 自定義屬性
            }
        ]
    }
]

上述配置將生成以下HTML結構：

<div class="kanban-item" data-eid="item-id-1" data-username="username1">
    Item 1
</div>

API方法詳解

jKanban提供了豐富的API方法，方便開發者進行動態操作：

方法名稱

參數

描述

addElement

boardID, element, position

在看板中添加項目，可指定插入位置

addForm

boardID, formItem

在看板中添加表單元素

addBoards

boards

添加一個或多個看板

findElement

id

根據ID查找項目

replaceElement

id, element

替換指定ID的項目

getParentBoardID

id

獲取項目所屬看板的ID

findBoard

id

根據ID查找看板

getBoardElements

id

獲取看板中的所有項目

removeElement

id

刪除指定ID的項目

removeBoard

id

刪除指定ID的看板

樣式定製

jKanban的CSS樣式提供了良好的擴展性，主要樣式類包括：

  • .kanban-container - 看板容器
  • .kanban-board - 看板樣式
  • .kanban-item - 項目樣式
  • .drag_handler - 拖拽手柄樣式

實際應用示例

查看example文件夾中的示例文件，瞭解jKanban的實際使用方式。示例展示了完整的看板配置，包括事件處理、動態添加刪除等功能。

開發指南

克隆項目後，使用以下命令安裝依賴並構建項目：

npm install
npm run build

項目特點

  1. 簡單易用 - 僅需幾行代碼即可完成初始化
  2. 高度可定製 - 支持樣式、事件處理程序的自定義
  3. 功能豐富 - 提供完整的API接口和事件回調
  4. 響應式設計 - 自動適應不同屏幕尺寸
  5. 流暢體驗 - 基於dragula的拖拽效果

jKanban憑藉其出色的功能和簡單的設計，是構建高效看板系統的理想選擇。無論是初學者還是經驗豐富的開發者，都能從中受益。