Javascript 单击cytoscape.js平移和z-index/前景化元素

我一直在使用cytoscape.js，在尝试使用图表时遇到了一些问题

1） 有没有办法通过单击并拖动背景来平移？看起来应该行得通，但我一直没能做到。在某个时候，我可能会添加panzoom，但如果不添加panzoom也可以，那将非常有用

下面是一个示例，其中包含我的代码的简化版本。

zoomEnabled:false

工作正常，但

panningEnabled:true

似乎不正常

2） 我遇到了一个问题，当涉及到分层节点在彼此之上

单击时，我是“前景化”节点，而单击之前单击过的节点是“中间化”节点。因此，当最近单击的节点与任何其他节点重叠时，它应该位于顶部。在最近一个节点之前单击的节点应位于除前固定节点之外的所有节点的顶部

我一直在尝试使用z-index来实现这一点，但失败了。这是我的点击功能：

cy.on('tap', 'node', function(e){
    var curr_node = e.cyTarget; 
    var prev_foci = cy.elements('node.focused');

    prev_foci.not(curr_node).addClass('less-focused');

    if (curr_node.hasClass('less-focused')){ //if it's been middlegrounded, foreground
      curr_node.removeClass('less-focused');
    } 
    else { //otherwise, swap between foreground and background
      curr_node.toggleClass('focused');
    }
});

我的风格看起来像

.selector('.focused')
  .css({
    'width' : 200,
    'height' : 200,
    'background-color' : "#505", 
    'z-index' : 4,
    'border-width' : "2px",
    'border-color' : "#999",
  })
.selector('.less-focused')
  .css({
    'background-color' : "#a00",
    'z-index' : 3,
  }),

这是一个例子

我已经用颜色编码了，以便更容易看到发生了什么。虽然我相信我的逻辑是正确的（颜色正在以我喜欢的方式切换，并且z索引与它们相关），但节点的视觉顺序似乎没有改变。如果覆盖两个节点，则默认情况下，它们只是将子节点置于父节点之上

但是，单击前景固定节点时，它们的行为就好像它们位于其他节点的顶部一样。如果覆盖两个节点并单击该重叠，则其行为将类似于单击了前景紫色节点，即使它在视觉上位于中间红色下方。当你点击并拖动它时，它看起来也正是我想要的，当你放开它时，它就会改变

另一个问题是文本。无论z索引或节点关系如何，它都会通过

我希望节点有效地不透明，并且不让其他节点或文本显示

我知道z-index只相对于父节点，但我认为这会起作用，因为它会影响所有其他选定节点。看来情况并非如此。有没有其他方法可以做到这一点？正如它所说的，从功能上看，它确实像我想要的那样工作。只是不是视觉上的

非常感谢

（1）按住背景直到看到活动的平移指示器。您还可以禁用框选择以加快保持延迟

---

（2） 你似乎发现了一个bug

一,。我知道我必须做些傻事，谢谢。谢谢你的建议！2.谢谢你这么快就解决了这个问题！节点重叠看起来很棒。但是对于标签，除非我做错了什么，否则不管z-index（）如何，它似乎仍然会显示出来。这可能是另一个bug还是同一个bug的一部分？如果是有意的，您有什么建议来防止我的应用程序发生这种情况吗？再次感谢。你可以想象标签存在于元素层之上的一个层中，所以它们总是在顶部。不过，我们可以改变这种行为：