[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:partial-node-drag-handles":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将固定布局节点移动限制在显式拖拽手柄上\n\n## 这个示例构建了什么\n\n这个示例构建了一个全高的 relation-graph 工作区，并且有意限制了节点移动。用户会看到一个放置在点状画布上的小型固定位置图谱、选中节点内部的琥珀色手柄区域、右侧工具栏，以及图谱上方悬浮的辅助窗口。\n\n用户只能重新定位部分节点，而且只能从每个节点内部渲染出来的特定手柄区域开始拖动。有些节点把整条头部区域作为手柄，有些节点则在左上角提供一个小型移动徽标作为手柄，没有这两种标记的节点则保持不可拖动。这种选择性移动模式是本示例的核心。\n\n页面还包含一些围绕图谱的共享工具行为。辅助窗口可以拖动或最小化，它的设置面板可以切换画布滚轮和拖动画布模式，当前图谱也可以导出为图片。\n\n## 数据是如何组织的\n\n图数据直接在 `initializeGraph()` 内以内联方式声明为一个 `RGJsonData` 对象。它包含 `rootId`、`nodes` 数组和 `lines` 数组。由于本示例使用的是固定布局而不是自动布局引擎，因此每个节点都使用显式的 `x` 和 `y` 坐标进行定义。\n\n这里重要的预处理思路是轻",true,500,1782615410230]