@antv/x6 利用interacting方法来设置禁止结点移动的方法实现。
1、官网有个设置说明。
https://x6.antv.antgroup.com/api/graph/graph
2、然后有可行的方法一:
let graph = new Graph({container: document.getElementById('container'),interacting: function (cellView) {if (cellView.cell.getData() != undefined && !cellView.cell.getData().disableMove) {return { nodeMovable: false };}return true;},grid: true,panning: {enabled: true,modifiers: 'shift',},
...
}
这里最主要是这段代码:
interacting: function (cellView) {if (cellView.cell.getData() != undefined && !cellView.cell.getData().disableMove) {return { nodeMovable: false };}return true;},
2.1、最后我们在增加节点的时候,加入下面代码:
nodes.push({shape: 'custom-node',x: item.x,y: item.y,id: item.id,width: item.size,height: item.sizeh,data: {disableMove: false, //true为可拖拽,false不可拖拽},
....
});
data: {disableMove: false, //true为可拖拽,false不可拖拽},
3、另一种方法:
interacting(cellView) {// if (cellView.cell.getData() != undefined && !cellView.cell.getData().disableMove) {return { nodeMovable: false };// }// return true;},
只要加上将第一种方法中的几行注掉,就可以了。
参考:
解决 antv x6 配置了限制节点、边移动不生效问题_antvx6设置节点禁止拖动,禁止改变大小-CSDN博客
antv x6控制每个图元是否可拖拽_antv x6 禁止拖拽-CSDN博客