Node Drag Handle

Demonstrates how to implement selective drag handles on graph nodes using the rg-node-drag-handler CSS class, allowing precise control over which areas of a node can be dragged while keeping other parts interactive.

Node Drag Handle

Functional Overview

This example demonstrates how to implement selective drag handles on graph nodes. By default, node dragging is disabled globally, but specific areas within nodes can be designated as drag handles using the rg-node-drag-handler CSS class. This allows for precise control over which parts of a node can be dragged.

Implementation of Key Features

Disabling Global Node Dragging

const graphOptions: RGOptions = {
    disableDragNode: true, // Disable dragging for entire node
    layout: {
        layoutName: 'fixed'
    }
};

Implementing Drag Handles

The key technique is adding the rg-node-drag-handler class to specific elements within a node slot:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="h-full">
            {/* Header becomes a drag handle */}
            {node.data.hasHeader && (
                <div className="rg-node-drag-handler px-3"
                     style={{ backgroundColor: '#f39930', color: 'white'}}>
                    {node.text}
                </div>
            )}
            {/* Button becomes a drag handle */}
            {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 ? 'Drag Header To Move Node' : 'Content'}
            </div>
        </div>
    )}
</RGSlotOnNode>

Node Data Configuration

nodes: [
    {
        id: 'SYS_ROLE',
        text: 'SYS_ROLE',
        data: { hasHeader: true } // Enables header drag handle
    },
    {
        id: 'SYS_DEPT',
        text: 'SYS_DEPT',
        data: { hasMoveButton: true } // Enables button drag handle
    }
]

Creative Use Cases

WYSIWYG Editors: In page builders or form designers, drag handles can be placed only on specific control areas while keeping the rest of the element interactive for content editing.

Dashboard Widgets: Dashboard widgets can have a dedicated “drag grip” area, preventing accidental repositioning when users interact with widget controls or data.

Card-based Layouts: In Kanban boards or card-based interfaces, drag handles can be limited to handle icons or title bars, leaving card content fully interactive for selection and editing.

Floating Panels: Floating tool panels can have small drag handles (like move icons), ensuring buttons and inputs remain clickable while allowing panel repositioning.

Organizational Charts: Node content like employee details can remain interactive and selectable, with only a header or corner handle permitting drag operations.

Complex Node Designs: Nodes with multiple interactive elements (buttons, links, inputs) can include dedicated drag handles to avoid conflicts between dragging and element interaction.