VisJS中如何同时启用editWithoutDrag与边端点拖拽功能？

要实现同时保留边的端点拖拽和弹窗编辑属性的功能，你需要在自定义的editEdge函数中区分拖拽端点和**触发编辑（如双击边）**两种操作场景，分别调用默认的拖拽逻辑和自定义弹窗逻辑。

核心实现代码 #

// 初始化VisJS网络实例时的配置
const network = new vis.Network(container, data, {
  edges: {
    // 必须开启此项，它是边端点拖拽功能的基础
    allowEdit: true,
    // 自定义editEdge处理函数
    editEdge: function(data, callback) {
      // 判断当前操作是否为拖拽端点：拖拽时VisJS会传递修改后的起点/终点到data中
      const isDragOperation = data.hasOwnProperty('from') || data.hasOwnProperty('to');
      
      if (isDragOperation) {
        // 若是拖拽端点操作，直接调用回调确认修改，保留默认拖拽逻辑
        callback(data);
      } else {
        // 若是双击触发的编辑操作，执行你的弹窗逻辑
        alert("编辑边属性！");
        // 这里可以替换为自定义弹窗表单，修改data属性后再完成回调
        // 示例：通过prompt修改边的标签
        data.label = prompt("输入新的边标签:", data.label);
        callback(data);
      }
    }
  }
});

关键逻辑说明 #

• allowEdit: true：这是开启边端点拖拽功能的前提，必须配置。
• 操作类型区分：在editEdge回调中，通过data对象是否包含from或to属性判断操作类型——拖拽端点时，VisJS会自动把修改后的起点/终点信息传入data。
• 分支处理：
  • 拖拽操作：直接调用callback(data)让VisJS应用端点修改，保留原生拖拽体验。
  • 编辑操作：执行自定义弹窗逻辑，修改边的属性后再调用callback(data)完成编辑流程。

扩展优化（精准区分双击/拖拽） #

如果需要更精准地识别双击触发的编辑（避免和拖拽误判），可以结合VisJS的事件监听提前标记操作类型：

let isDoubleClick = false;

// 监听双击事件，标记为编辑操作
network.on('doubleClick', function(params) {
  if (params.edges.length > 0) {
    isDoubleClick = true;
  }
});

// 监听单击事件，延迟重置标记（避免和双击冲突）
network.on('click', function() {
  setTimeout(() => { isDoubleClick = false; }, 200);
});

// 在editEdge中使用标记判断
editEdge: function(data, callback) {
  if (isDoubleClick) {
    // 双击触发弹窗编辑
    alert("编辑边属性！");
    callback(data);
    isDoubleClick = false;
  } else {
    // 拖拽操作，执行默认逻辑
    callback(data);
  }
}

这样就能完美兼顾边端点的拖拽调整和弹窗编辑属性的需求了。

内容的提问来源于stack exchange，提问作者User L