Question

阅读 this page on external drag and drop在DHTMLX的网站上，我得出的结论是，我可以从外部DHTMLX组件拖放，但不能从第三方或自编写组件拖放。

我已经包含了拖放javascript模块：

ext/dhtmlxscheduler_outerdrag.js

我创建了一个虚拟事件处理程序：

scheduler.attachEvent("onExternalDragIn", function (id, source, event) {
    return true;
});

我写了一个附加到我的组件的拖动事件：

的HTML ：

<div draggable="{{item.draggable}}" data-itemid="{{item.id}}"
    ondragstart="drag(event, this.getAttribute('data-itemid'))">

JS ：

function drag(ev, itemId) {
    ev.dataTransfer.setData("text", itemId);
}

但是......我不知道如何使用调度程序时间轴组件实现drop。

我试过这个：

的HTML ：

<div id="scheduler1" class="dhx_cal_container" ondrop="drop(event)" 
    ondragover="allowDrop(event)">

JS ：

function allowDrop(ev) {
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
}

...但是当我将某些东西放到网格上时，所有这一切都会触发一个通用事件。我（显然）没有得到关于我放入哪个网格单元的信息。我将如何编码以了解我已登陆的哪一行/列？

Answer 1

我在DHTMLX网站的this related question找到了解决方案。

原来我错过的只是在getActionData()方法中拨打drop：

function drop(ev) {
    ev.preventDefault();
    var sourceData = ev.dataTransfer.getData("text");   // what we dragged (the tree node in this case)
    var targetData = scheduler.getActionData(ev);       // what we dropped (.date = datetime, .section = id of section)
}

另外，我需要将drop(event)的引用放回到声明调度程序的div中：

<div id="scheduler1" class="dhx_cal_container" style="width:100%; height:620px;" 
    ondrop="drop(event)" ondragover="allowDrop(event)">

这attachEvent是无关紧要的：

scheduler.attachEvent("onExternalDragIn", function (id, source, event) {
    return true;
});

从第三方组件拖放到调度程序时间轴

1 个答案: