JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>
CSS
#mynetwork {
width: 600px;
height: 300px;
border: 1px solid lightgray;
}
JavaScript
// create an array with nodes
let nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
// create an array with edges
let edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
const container = document.getElementById("mynetwork");
const data = {
nodes: nodes,
edges: edges,
};
const options = {};
const network = new vis.Network(container, data, options);
// Set variable to store previous selection and initaliase
// to current selection
let previousSelection = network.getSelection();
// Store selection on mousedown of vis-network container
// This executes before the vis-network dragStart event
// The vis-network dragStart event cannot be used as the
// selection has already changed when it fires
container.addEventListener('mousedown', (event) => {
previousSelection = network.getSelection();
});
// When dragging ends restore previous selection
network.on('dragEnd', function(){
network.setSelection(previousSelection);
});