為了滿足 DHTMLX Scheduler 用戶的實際業務需求，本文將展示如何在 JavaScript 日程組件中實現“帶拖拽的任務待辦區（Backlog）”。這一功能讓用戶可以像物業管理系統那樣，通過簡單的拖拽操作將任務分配到時間軸上的合適位置，大幅提升排程效率與體驗。

DHTMLX Scheduler 試用下載

本文將帶您一步步實現這一功能。

使用場景說明

某位 Scheduler 用戶提出：希望能像資源管理系統一樣，將任務從“待辦區（backlog）”拖拽到資源（員工）的日程表中，而無需手動設置日期和人員。

DHTMLX Scheduler 本身沒有內置此功能，但憑借其強大的 API，開發者完全可以手動實現。

基于該需求，本文展示了如何在 JS 日歷中實現任務待辦區與拖拽排程的完整邏輯。

實現步驟概覽

要實現該功能，需要以下幾個步驟：

1. 渲染可拖拽的待辦任務卡片；

2. 在拖拽過程中高亮顯示可放置的時間槽；

3. 在任務放下時計算并插入到 Scheduler 中；

4. 支持任務“取消排程”并返回待辦區。

下面我們分步驟介紹實現方式。

Step 1: 初始化 Scheduler

首先，需要對 Scheduler 進行初始化，配置視圖和插件，例如：

scheduler.plugins({
    units: true,
    timeline: true,
    tooltip: true,
    quick_info: true,
});

可通過scheduler.config.first_hour和scheduler.config.last_hour設置顯示的時間范圍（如 06:00 – 20:00，僅顯示工作時間）。

同時，需要建立一個 共享 store 對象，用于在待辦區與 Scheduler 之間同步任務數據。

Step 2: 渲染待辦任務（Backlog）

在頁面中動態生成待辦任務卡片（HTML 元素），并通過dragstart事件將任務數據綁定到拖拽動作中：

• 添加拖拽中的視覺反饋；

• 將任務數據序列化并寫入dataTransfer；

• 自定義拖拽圖像，提升用戶體驗。

listItem.addEventListener("dragstart", (e) => {
    if (e.target.matches(".uncheduled-task-card")) {
        e.target.classList.add("dragging-task");
        const task = store.getState().tasks.find((t) => t.id == e.target.dataset.id);
        e.dataTransfer.setData("application/json", JSON.stringify(task));
        ...
    }
});

Step 3: 高亮可放置時間槽

在任務拖拽到時間槽上時，通過scheduler.markTimespan()實現高亮提示，幫助用戶直觀理解任務將被放置的位置和時段。

currentMarkTime = scheduler.markTimespan({
    start_date,
    end_date,
    css: "timeslot-highlight-marktime",
    sections: { unit: section, timeline: [section] },
});

當任務拖出日程區域時，自動移除高亮效果，避免視覺殘留。

Step 4: 將任務轉化為日程事件

當任務被放下（drop）時：

1. 清除高亮標記；

2. 從dataTransfer中獲取任務數據；

3. 計算任務的start_date與end_date；

4. 使用store.upsertTask更新任務并寫入 Scheduler。

dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = JSON.parse(e.dataTransfer.getData("application/json"));
    const { date, section } = scheduler.getActionData(e);
    const start_date = date;
    const end_date = calcEndDate(start_date, data.duration);
    store.upsertTask({ ...data, start_date, end_date, owner_id: section });
});

Step 5: 取消排程并返回待辦區

在任務編輯框（lightbox）或快速信息（quick info）中添加“取消排程”按鈕，將任務恢復到 backlog：

scheduler.config.buttons_left = ["dhx_save_btn", "dhx_cancel_btn", "unschedule_button"];
scheduler.locale.labels["unschedule_button"] = "Unschedule";

總結

通過以上步驟，您可以輕松為 DHTMLX Scheduler 擴展一個“帶拖拽的任務待辦區”。該功能可幫助用戶更加靈活、直觀地管理任務排程，尤其適合資源分配和工單調度等場景。

關于 DHTMLX Scheduler

DHTMLX Scheduler 是一款專業的 JavaScript 日程排程控件，支持日/周/月/時間軸等多種視圖模式，具備高度可定制性，適用于排班系統、預約系統、項目排期、課程表等場景，完美適配 Angular、Vue、React 等主流框架。

?? 慧都科技 — DHTMLX 官方授權中國區合作伙伴

?? 了解更多 DHTMLX 產品詳情或申請試用，請

關于慧都科技：

慧都科技是一家行業數字化解決方案公司，長期專注于軟件、油氣與制造行業。公司基于深入的業務理解與管理洞察，以系統化的業務建模驅動技術落地，幫助企業實現智能化運營與長期競爭優勢。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控?；鄱伎萍糄HTMLX在中國的官方授權代理商，提供DHTMLX系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的優秀Web應用程序框架。

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681