为了满足 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 产品详情或申请试用，请联系在线客服>>>

关于慧都科技：

慧都科技是一家行业数字化解决方案公司，长期专注于软件、油气与制造行业。公司基于深入的业务理解与管理洞察，以系统化的业务建模驱动技术落地，帮助企业实现智能化运营与长期竞争优势。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技DHTMLX在中国的官方授权代理商，提供DHTMLX系列产品免费试用，咨询，正版销售等于一体的专业化服务。DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。 遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的优秀Web应用程序框架。

下载|体验更多DHTMLX，请联系在线客服咨询，或拨打产品热线：023-68661681