示例 论坛 支持
文档
Start指南管理调度器事件

拖放操作

本库包含 outerdrag 扩展，使您可以通过从外部 DHTMLX 组件或其他调度器拖动元素来创建新事件。

从外部组件拖拽

当从外部来源拖动元素到调度器时，调度器会自动打开 lightbox 以创建新事件。


Related sample:  Integration with dhtmlxTree


以下是 dhtmlxTree 组件与外部拖放的工作方式。

要将调度器与 dhtmlxTree 集成，请按照以下步骤操作：

  1. 下载 dhtmlxTree 包，并将其内容解压到应用根目录。
  2. 在页面中引入所需的 js 和 css 文件： 
    <script src="../codebase/dhtmlxscheduler.js" ...></script>
<link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" ...>
...
  3. 启用 outerdrag 扩展： 
    scheduler.plugins({
    outerdrag: true
});
  4. 初始化 dhtmlxTree 组件（参见 此处）： 
    var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0);
tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/");
tree.loadXML("./data/tree.xml");
  5. 在 dhtmlxTree 组件中启用拖放（说明见 此处）： 
    tree.enableDragAndDrop(true);
  6. 初始化并配置调度器： 
    ...
scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline");
  7. 为 onExternalDragIn 事件绑定处理函数，以定义如何将拖拽元素的文本赋值给事件： 
    scheduler.attachEvent("onExternalDragIn", function(id, source, event){
    var label = tree.getItemText(tree._dragged[0].id);
    scheduler.getEvent(id).text = label;
    return true;
});

Related sample:  Integration with dhtmlxTree

完成上述设置后，您只需拖拽所需节点即可轻松通过树的数据创建新事件。

调度器间的拖放

此功能仅适用于 Commercial（自 2021 年 10 月 6 日起）、Enterprise 和 Ultimate 许可证版本。

当在页面上显示多个调度器时，可以启用它们之间的拖放，实现事件在不同调度器之间的无缝移动。

要启用调度器间的拖放支持，请引入 "drag_between" 扩展：

Enabling drag-and-drop support for several schedulers 

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css">
 
<script>
scheduler.plugins({
    drag_between: true
});
 
scheduler.init('scheduler_here',new Date(2019, 5, 30),"week");
scheduler.load("./data/units.xml");
 
scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");
</script>

您可以在 Scheduler PRO package 中的 "samples/20_multiple/06_drag_between_layout.html" 示例中找到相关代码。

限制事件拖出/拖入调度器

如需禁止事件从某个调度器中拖出，请将 drag_out 属性设置为 false：

scheduler.config.drag_out = false; // 禁止事件从该调度器拖出 scheduler.init('scheduler_here',new Date(2019, 5,30),"week");
scheduler.load("./data/units.xml");
 
scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");


如需禁止事件被拖入某个调度器，请将 drag_in 属性设置为 false：

scheduler.init('scheduler_here',new Date(2019, 5, 30),"week");
scheduler.load("./data/units.xml");
 
scheduler2.config.drag_in = false; // 禁止事件被拖入该调度器 scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");

"samples/20_multiple/06_drag_between_layout.html" 示例可在 Scheduler PRO package 中获取。

拖放事件

返回顶部