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>