我当前正在使用Cystoscope Java脚本库通过使用HTML事件拖放和边缘句柄扩展在节点div之间拖放来在画布div容器上拖放一个元素(来自组件面板/面板)来构建图形手动。
我有一个浮动面板,该面板将列出各种类型的组件(类型为“ palette-node”的div元素),使用HTML5拖放功能将该组件拖放到画布容器div上。通过捕获目标画布容器上的放置事件,我可以通过计算鼠标坐标在画布中创建新节点(类型canvas-node)。这可以按预期工作,并且可以通过从浮动面板到膀胱镜容器元素的拖放事件在画布中添加尽可能多的节点。
现在,我正在检查是否有可能断开链接,以便将断开的链接插入已链接的其他两个节点之间。我找不到合适的方法来检测膀胱镜链接对象上的节点(浮动面板的调色板节点)掉落。您能否提供解决此问题的想法?
我曾尝试在逐个链接上侦听drop事件,并在膀胱镜实例Cy中释放了free事件,但是由于我正在丢弃其他类型(浮动面板的调色板节点div),因此未检测到该事件。
关于cytoscape容器div元素的监听器声明
this.containerElem.current.addEventListener("drop", this.dropHandler, false);
this.containerElem.current.addEventListener("dragover", this.dragOverHandler, false);
拖放处理程序以在cytoscape图中添加新节点
dropHandler = (dropEvt) => {
dropEvt.preventDefault();
let eventSource = this._getDragEventSource(dropEvt);
if (eventSource.type === "palette-node") {
let compType = eventSource.data.type;
let position = this.getPosition(dropEvt);
nodeData = {
type: compType,
x: point.x,
y: point.y
};
createDiagramNode(nodeData);
}
return false;
}