禁用在cytoscape.js中拖动区域外的节点

Question

我正在使用cytoscape.js。

我允许用户拖动节点，但是现在也可以将节点拖到“画布”之外。

我查看了http://js.cytoscape.org/#core/initialisation处的选项，但我不知道如何确保节点无法离开可见区<div id="cy"></div>。

Answer 1

我知道这已经很久了，但是今天我遇到了同样的问题，这是我的解决方案，只需将节点移回。

cy.on('mouseup', function (e) {
    let tg = e.target;
    if (tg.group != undefined && tg.group() == 'nodes') {
        let w = cy.width();
        let h = cy.height();
        if (tg.position().x > w) tg.position().x = w;
        if (tg.position().x < 0) tg.position().x = 0;
        if (tg.position().y > h) tg.position().y = h;
        if (tg.position().y < 0) tg.position().y = 0;
    }
})

Answer 2

尝试自动转发扩展程序：https://github.com/cytoscape/cytoscape.js-automove

它允许您为节点位置设置规则，例如在当前视口或指定区域内进行约束。