Vis.js不使用工具栏实现拖拽节点创建边的技术问询

我之前刚好做过类似的需求，不用依赖自带工具栏，完全通过拖拽节点来创建边，下面是完整的实现方案，亲测可用：

核心思路 #

通过监听Vis.js网络的dragStart和dragEnd事件：

• 拖拽开始时记录被拖动的节点ID
• 拖拽结束时，获取鼠标落点对应的节点，验证后创建新边

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style>
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
  <div id="mynetwork"></div>

  <script>
    // 初始化节点数据集
    const nodes = new vis.DataSet([
      {id: 1, label: 'Node 1'},
      {id: 2, label: 'Node 2'},
      {id: 3, label: 'Node 3'},
      {id: 4, label: 'Node 4'},
      {id: 5, label: 'Node 5'}
    ]);

    // 初始化边数据集（初始为空）
    const edges = new vis.DataSet([]);

    const container = document.getElementById('mynetwork');
    const data = { nodes: nodes, edges: edges };
    const options = {
      interaction: {
        dragNodes: true, // 确保节点允许拖拽
        hover: true // 可选，开启 hover 效果提升交互体验
      },
      edges: {
        smooth: true // 可选，让边更美观
      }
    };

    // 创建网络实例
    const network = new vis.Network(container, data, options);

    let draggedNodeId = null;

    // 监听拖拽开始事件，记录被拖拽的单个节点
    network.on('dragStart', function(params) {
      // 只处理单个节点拖拽的情况，避免多选拖拽时误操作
      draggedNodeId = params.nodes.length === 1 ? params.nodes[0] : null;
    });

    // 监听拖拽结束事件，判断是否需要创建边
    network.on('dragEnd', function(params) {
      if (!draggedNodeId) return;

      // 获取拖拽结束时鼠标在画布上的位置
      const canvasPosition = { 
        x: params.pointer.canvas.x, 
        y: params.pointer.canvas.y 
      };
      // 获取该位置对应的目标节点ID
      const targetNodeId = network.getNodeAt(canvasPosition);

      // 验证条件：目标节点存在，且不是拖拽节点本身
      if (targetNodeId && targetNodeId !== draggedNodeId) {
        // 检查边是否已存在，避免重复创建
        const duplicateEdge = edges.get({
          filter: edge => 
            (edge.from === draggedNodeId && edge.to === targetNodeId) ||
            (edge.from === targetNodeId && edge.to === draggedNodeId)
        });

        if (duplicateEdge.length === 0) {
          // 添加新边，可自定义边的样式（比如label、color等）
          edges.add({ 
            from: draggedNodeId, 
            to: targetNodeId,
            label: 'New Edge' // 可选，给边添加标签
          });
        }
      }

      // 重置拖拽节点ID，准备下一次操作
      draggedNodeId = null;
    });
  </script>
</body>
</html>

关键细节说明 #

• 拖拽事件处理：dragStart只记录单个节点的拖拽，防止多选拖拽时触发错误的边创建
• 目标节点检测：network.getNodeAt()方法可以精准获取鼠标位置下的节点，是实现这个功能的核心
• 去重逻辑：添加边前检查是否已存在相同的边，避免重复创建
• 可自定义扩展：你可以根据需求修改边的样式（比如颜色、粗细、箭头），或者添加拖拽过程中的视觉反馈（比如临时连线）

内容的提问来源于stack exchange，提问作者Abdul Manan