All versions of this documentation
X

Draggable/non-draggable nodes

Green nodes are draggable, for the grey ones dragging is programmatically disabled. You can also force making a node draggable by double-clicking it.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>
<script>
  'use strict';
  var ogma = new Ogma({
    container: 'graph-container'
  });

  // make even nodes draggable and color them green
  ogma.styles.addNodeRule({
    draggable: function (n) { return n.getId() % 2 === 0; },
    color:     function (n) { return n.getId() % 2 === 0 ? 'green': 'grey'; }
  });

  // Generate a random graph and assign it to Ogma.
  ogma.generate.random({
    nodes: 15,
    edges: 30
  }).then(function(g) {
    ogma.setGraph(g);
    ogma.view.locateGraph();
  });

  // force-set 'draggable' property
  ogma.events.onDoubleClick(function (evt) {
    if (evt.target && evt.target.isNode) {
      evt.target.setAttributes({
        draggable: true,
        color: 'green'
      });
    }
  });
</script>
</body>
</html>