[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:node-drag-collision-drop-rules":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 具备碰撞感知的节点拖拽与放置规则\n\n## 这个示例构建了什么\n\n这个示例构建了一个紧凑的关系工作区，在这里，把一个节点拖到另一个节点上会成为一种由规则驱动的编排手势。界面初始是一个固定位置布局的图，包含矩形和圆形两类节点，背景是点状画布，同时还有一个浮动帮助窗口和一个固定图例，用于说明拖拽状态。\n\n用户可以拖拽节点，观察目标节点在绿色、红色和紫色反馈之间切换，在每个目标节点的卡片内修改其放置策略，并在允许的目标上释放以创建一条新连线。重点不在于自由式布局编辑，而在于展示 `relation-graph` 如何将重叠检测转化为拖拽过程中的接受、拒绝或受限移动。\n\n## 数据是如何组织的\n\n这个图以内联方式声明为一个 `RGJsonData` 对象，包含 `rootId`、扁平的 `nodes` 数组以及扁平的 `lines` 数组。由于该示例使用固定布局，每个节点都带有固定的 `x` 和 `y` 坐标，另外有些节点还会在 `node.data` 中携带运行时策略标记，例如 `allowDrop` 和 `disallowDroppingNodesInside`。\n\n在调用 `setJs",true,500,1782615409698]