Vis.js vis-network：如何从节点右键菜单拖拽边至目标节点

核心思路 #

通过右键点击节点时记录目标节点ID，点击菜单选项后临时启用addEdgeMode()，并手动调用vis-network内部方法触发从该节点开始的拖拽连接流程，避免持续启用编辑模式导致物理效果失效。

具体实现步骤 #

1. 记录右键点击的源节点
   在oncontext事件中捕获右键点击的节点，保存其ID：

   let sourceNodeId = null;
   
   // 监听右键点击事件
   network.on("oncontext", (params) => {
     if (params.nodes.length > 0) {
       sourceNodeId = params.nodes[0];
       // 这里替换成你的右键菜单显示逻辑
       showCustomContextMenu(params.pointer.DOM);
     }
   });
   

2. 菜单点击触发拖拽流程
   给右键菜单的"拖拽边"选项绑定点击事件，临时启用编辑模式并启动拖拽：

   // 假设菜单选项的ID为drag-edge-btn
   document.getElementById("drag-edge-btn").addEventListener("click", () => {
     if (!sourceNodeId) return;
   
     // 启用添加边模式
     network.addEdgeMode();
   
     // 获取源节点的DOM坐标，用于模拟事件参数
     const nodePos = network.getPositions(sourceNodeId)[sourceNodeId];
     const domPos = network.canvasToDOM(nodePos);
     const targetNode = network.body.nodes[sourceNodeId];
   
     // 调用内部方法启动拖拽连接
     network.manipulation._handleConnect(targetNode, {
       clientX: domPos.x,
       clientY: domPos.y
     });
   });
   

3. 拖拽结束后恢复状态
   在添加边完成或取消时，关闭编辑模式并清空记录的节点ID：

   // 边添加完成后恢复
   network.on("addEdge", () => {
     network.disableEditMode();
     sourceNodeId = null;
   });
   
   // 取消添加边后恢复
   network.on("cancelEdge", () => {
     network.disableEditMode();
     sourceNodeId = null;
   });
   

注意事项 #

• 内部方法_handleConnect属于vis-network的非公开API，不同版本可能存在差异，建议在对应版本（如v8.x、v9.x）中测试验证。
• 若右键菜单是自定义实现，需确保在点击菜单选项时不会触发画布的点击事件导致节点选中状态丢失。

内容的提问来源于stack exchange，提问作者Nikhil Varma