Skip to content
  1. Examples

Drag nodes

This example shows how to use the nodesDragStart, nodesDragProgress and nodesDragEnd events.
Uncomment in the handlers to see the effect in your console.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

ogma.events.on('nodesDragStart', eventData => {
  console.log('start', eventData);
  // console.log('Starting drag nodes ' +
  // eventData.nodes.getId().join() +
  // ' at (' + eventData.x + ', ' + eventData.y + ')');
});

ogma.events.on('nodesDragProgress', eventData => {
  console.log('progress', eventData);
  // console.log('Dragging node ' + eventData.node.getId() +
  // ' to (' + eventData.x + ', ' + eventData.y + ')');
});

ogma.events.on('nodesDragEnd', eventData => {
  console.log('end', eventData);
  // console.log('Ending drag node ' + eventData.node.getId() +
  // ' at (' + eventData.x + ', ' + eventData.y + ')');
});

// Generate a random graph and assign it to Ogma.
ogma.generate
  .random({ nodes: 16, edges: 0 })
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.layouts.grid({ duration: 0, locate: true }));
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}