G6中如何实现拖动已存在的边到另外一个节点？how can I draw the existed edge to another target node？

[chasenli]

graph.on('edge:click'）

[petercat-assistant[bot]]

要在 G6 中实现将已存在的边拖动到另一个节点，可以通过监听边的点击事件，然后在拖动过程中更新边的目标节点。以下是一个简单的实现步骤：

1. 监听边的点击事件：使用 graph.on('edge:click', callback) 来监听边的点击事件。

2. 开始拖动：在点击事件的回调函数中，记录当前点击的边，并监听鼠标的移动事件。

3. 更新目标节点：在鼠标移动事件中，实时更新边的目标节点为鼠标当前位置下的节点。

4. 结束拖动：监听鼠标释放事件，将边的目标节点更新为最终的节点。

以下是一个简单的代码示例：

// 假设 graph 是已经初始化的 G6 图实例

let draggingEdge = null;

graph.on('edge:click', (evt) => {
  const { item } = evt;
  draggingEdge = item;
});

graph.on('mousemove', (evt) => {
  if (draggingEdge) {
    const point = { x: evt.x, y: evt.y };
    // 更新边的目标位置为鼠标当前位置
    graph.updateItem(draggingEdge, {
      target: point,
    });
  }
});

graph.on('mouseup', (evt) => {
  if (draggingEdge) {
    const targetNode = graph.findNearestNode(evt);
    if (targetNode) {
      // 更新边的目标节点为最近的节点
      graph.updateItem(draggingEdge, {
        target: targetNode.getID(),
      });
    }
    draggingEdge = null;
  }
});

请注意，这只是一个基本的实现，可能需要根据具体需求进行调整和优化。

如果有其他问题或需要进一步的帮助，请随时告诉我！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[chasenli]

thanks。再咨询：最新的G6版本是否还支持监听事件edge:dragstart','edge:drag' ？