如何通过拖拽节点拖动整个画布，而不是只拖拽单个节点

[MartinRay534]

如何通过拖拽节点拖动整个画布，而不是只拖拽单个节点

[petercat-assistant[bot]]

在 antvis/G6 中，如果你想通过拖拽节点来拖动整个画布，而不是只拖拽单个节点，可以通过以下方法实现：

1. 禁用节点的拖拽行为：首先，你需要禁用节点的默认拖拽行为。可以通过设置节点的 draggable 属性为 false 来实现。

2. 启用画布的拖拽行为：然后，你可以启用画布的拖拽行为。可以通过 G6 提供的 drag-canvas 行为来实现。

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

const graph = new G6.Graph({
  container: 'mountNode', // 容器ID
  width: 800,
  height: 600,
  modes: {
    default: ['drag-canvas'], // 启用画布拖拽
  },
  defaultNode: {
    type: 'circle',
    size: [50],
    style: {
      fill: '#9FD5FF',
      stroke: '#5B8FF9',
    },
    // 禁用节点拖拽
    draggable: false,
  },
});

// 添加节点和边
graph.data({
  nodes: [
    { id: 'node1', x: 100, y: 100 },
    { id: 'node2', x: 200, y: 200 },
  ],
  edges: [
    { source: 'node1', target: 'node2' },
  ],
});

graph.render();

在这个示例中，我们通过设置 modes 中的 default 模式为 drag-canvas 来启用画布的拖拽功能，并通过设置 defaultNode 的 draggable 属性为 false 来禁用节点的拖拽功能。

这样，当你拖拽节点时，实际上是在拖动整个画布。

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

🪧 Tips

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

[MartinRay534]

禁用节点拖拽启用画布拖拽会导致节点点击域不可拖拽节点，如何解决节点点击域拖拽画布的问题

[liaodalin19903]

你的问题是想要通过拖动节点就直接把Graph拖动，你可以看下这个是否符合你的需求：
https://g6.antv.antgroup.com/zh/examples/scene-case/default/#sub-graph

按住shift键可以进行拖转子Graph。