how to automove any node in cytoscape js - cytoscape.js

Question

I use cytoscape js automove extention, I can move two node together:
cy.automove({
nodesMatching: cy.$('#a'),
reposition: 'drag',
dragWith: cy.$('#b')
});
But I must specify the node #a and #b, now I need whenever I move any node, its neighborhood move together, not a special node.
So I try this:
<style>
#cy{
width:600px;
height:800px
}
</style>
<script src="cytoscape.js"></script>
<script src="cytoscape-automove.js"></script>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // node c
data: { id: 'c' }
},
{ // node d
data: { id: 'd' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
},
{ // edge cd
data: { id: 'cd', source: 'c', target: 'd' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#566',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#bcc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
},
boxSelectionEnabled:true,
panningEnabled: true,
selectionType:"additive"
});
cy.on("drag",function(evt){
var node=evt.target;
cy.automove({
nodesMatching: node.neighbourhood().nodes(),
reposition: 'drag',
dragWith: node
});
});
</script>
The result is once I move node #a, node #b will not move together.But I move the node #a again, #b is moved but the position is wrong, it is too far.
So does the dragWith must be a special one? What if I want to move any one?

Answer 1

How about this:
var i = 0;
cy.unbind("tapdrag");
cy.unbind("tapend");
cy.bind("tapdrag", "node", function(evt){
if (i = 0) {
i = 1;
var node = evt.target;
var target = cy.edges("[source = '" + node.id() + "']").target();
cy.automove({
nodesMatching: target,
reposition: 'drag',
dragWith: node
});
}
});
cy.bind("tapend", "node", function(evt) {
i = 0;
});