Only horizontal draging?

[NilsBaumgartner1994]

I face a bug, where i can only drag nodes horizontally but not in the other directions?

import React, {FunctionComponent} from 'react';
import {Menubar} from 'primereact/menubar';
import Graph from "react-graph-vis";

// @ts-ignore
export interface DataClumpsGraphProps {
    dataClumpsDict: any
}

export const DataClumpsGraph : FunctionComponent<DataClumpsGraphProps> = (props: DataClumpsGraphProps) => {

    function renderGraph(){
        const graph = {
            nodes: [
                { id: 1, label: "Node 1", title: "node 1 tootip text" },
                { id: 2, label: "Node 2", title: "node 2 tootip text" },
                { id: 3, label: "Node 3", title: "node 3 tootip text" },
                { id: 4, label: "Node 4", title: "node 4 tootip text" },
                { id: 5, label: "Node 5", title: "node 5 tootip text" }
            ],
            edges: [
                { from: 1, to: 2 },
                { from: 1, to: 3 },
                { from: 2, to: 4 },
                { from: 2, to: 5 }
            ]
        };

        const physics = {
            solver: "forceAtlas2Based",
            forceAtlas2Based: {
                gravitationalConstant: -200,
                centralGravity: 0.02,
                springLength: 75,
                springConstant: 0.08,
                damping: 0.4,
                avoidOverlap: 0.5
            }
        };


        const options = {
            layout: {
                hierarchical: true
            },
            edges: {
                color: "#000000"
            },
            autoResize: true,
            physics: physics,
            height: "300px",
            width: "300px"
        };

        const events = {
            select: function(event) {
                var { nodes, edges } = event;
            }
        };
        return (
            <Graph
                graph={graph}
                options={options}
                events={events}
                getNetwork={network => {
                    //  if you want access to vis.js network api you can set the state in a parent component using this property
                }}
            />
        );
    }

    return(
        <div style={{height: "300px", width: "300px", backgroundColor: "orange"}}>
            <div style={{height: "300px", width: "300px"}} >
                {renderGraph()}
            </div>
        </div>
    )

}

[aeron169]

You just need to change hierarchical:true to hierarchical: false in the option object