节点拖拽手柄

演示如何使用 rg-node-drag-handler CSS 类为图节点实现选择性拖拽手柄，精确控制节点的哪些区域可以被拖动，同时保持其他部分可交互。

节点拖拽手柄

功能概述

本示例演示如何为图节点实现选择性拖拽手柄。默认情况下，节点拖拽功能被全局禁用，但可以使用 rg-node-drag-handler CSS 类将节点内的特定区域指定为拖拽手柄，从而精确控制节点的哪些部分可以被拖动。

核心特性实现

禁用全局节点拖拽

const graphOptions: RGOptions = {
    disableDragNode: true, // 禁用整个节点的拖拽
    layout: {
        layoutName: 'fixed'
    }
};

实现拖拽手柄

关键技巧是在节点插槽内的特定元素上添加 rg-node-drag-handler 类：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="h-full">
            {/* 标题栏成为拖拽手柄 */}
            {node.data.hasHeader && (
                <div className="rg-node-drag-handler px-3"
                     style={{ backgroundColor: '#f39930', color: 'white'}}>
                    {node.text}
                </div>
            )}
            {/* 按钮成为拖拽手柄 */}
            {node.data.hasMoveButton && (
                <div className="rg-node-drag-handler cursor-move absolute top-0 left-0"
                     style={{ backgroundColor: '#f39930', color: 'white'}}>
                    <MoveIcon />
                </div>
            )}
            <div className="p-5">
                {node.data.hasHeader ? '拖拽标题栏移动节点' : '内容'}
            </div>
        </div>
    )}
</RGSlotOnNode>

节点数据配置

nodes: [
    {
        id: 'SYS_ROLE',
        text: 'SYS_ROLE',
        data: { hasHeader: true } // 启用标题栏拖拽手柄
    },
    {
        id: 'SYS_DEPT',
        text: 'SYS_DEPT',
        data: { hasMoveButton: true } // 启用按钮拖拽手柄
    }
]

创意使用场景

所见即所得编辑器：在页面构建器或表单设计器中，拖拽手柄可以仅放置在特定控制区域，而其余元素区域保持可交互状态以便内容编辑。

仪表盘小部件：仪表盘小部件可以设置专用的"拖拽抓握"区域，防止用户在与小部件控件或数据交互时意外重新定位。

卡片式布局：在看板或卡片式界面中，拖拽手柄可以限制为手柄图标或标题栏，保持卡片内容完全可交互以便选择和编辑。

浮动面板：浮动工具面板可以设置小型拖拽手柄（如移动图标），确保按钮和输入框保持可点击，同时允许面板重新定位。

组织架构图：员工详情等节点内容可以保持可交互和可选择状态，仅标题栏或角落手柄允许拖拽操作。

复杂节点设计：具有多个交互元素（按钮、链接、输入框）的节点可以包含专用拖拽手柄，避免拖拽与元素交互之间的冲突。