HTMLGraph | Draggable Nodes

Draggable Nodes

To enable built-in draggable nodes, call the enableUserDraggableNodes method on CanvasBuilder.

    
const element = document.getElementById(&#39;canvas&#39;);

const canvas = new CanvasBuilder()
  .setElement(element)
  .enableUserDraggableNodes()
  .build();

Draggable Nodes

This method accepts optional configuration:

    
const element = document.getElementById(&#39;canvas&#39;);

const canvas = new CanvasBuilder()
  .setElement(element)
  .enableUserDraggableNodes({
    moveOnTop: false,
    mouse: {
      dragCursor: &#34;crosshair&#34;,
      mouseDownEventVerifier: (event: MouseEvent) =&gt; event.ctrlKey,
      mouseUpEventVerifier: (event: MouseEvent) =&gt; true,
    },
    events: {
      onNodeDrag: (payload: NodeDragPayload) =&gt; {
        console.log(payload);
      },
      onBeforeNodeDrag: (payload: NodeDragPayload) =&gt; {
        console.log(payload);
        return true;
      },
      onNodeDragFinished: (payload: NodeDragPayload) =&gt; {
        console.log(payload);
      },
    },
  })
  .build();

Configuration Parameters

Name	Type	Description	Required	Default
moveOnTop	boolean	Move grabbed node to the top	no	true
mouse	MouseConfig	Mouse-related configuration	no	{}
events	EventsConfig	Handlers for available events	no	{}

Mouse Configuration

Name	Type	Description	Required	Default
dragCursor	string \| null	Cursor to set on grab	no	“grab”
mouseDownEventVerifier	function	Function to verify if mouse event should trigger grab	no	() => true
mouseUpEventVerifier	function	Function to verify if mouse event should trigger release	no	() => true

Events Configuration

Name	Type	Description	Required	Default
onNodeDrag	function	Function to call when node is dragged	no	() => void
onBeforeNodeDrag	function	Function to verify if node should be dragged	no	() => true
onNodeDragFinished	function	Function to call when node drag is finished	no	() => void