mxgraph：我想向 disable/enable 图表和工具栏添加一个按钮

Question

我试图通过不允许图表上的单元格使用以下代码来禁用图表。 graph.setCellsSelectable(false); 但它不起作用，仍然可以 select 单元格，（仅禁用调整大小）

为了禁用工具栏，我尝试删除或替换 ondrag 事件，是否正确？理论上我认为 mxgraph 有自己的事件处理程序来拖动工具栏项目。

mx_toolbar.appendChild(
    mxUtils.button("Disable/Enable", function() {
         document.querySelectorAll('.toolbar > button').addEventListener(function (e) {
             e.preventDefault()
             return false;
         });
    }
)

希望得到您的帮助。我不介意，只要它是有效的解决方案。谢谢

Answer 1

无需删除或修改事件处理程序，您只需覆盖要禁用的区域以及 css。

      var toolbarContainer = document.querySelector(".toolbar");
      var overlay = document.querySelector(".toolbar-overlay")

      if (!overlay) {
        overlay = document.createElement('div')
        overlay.className = 'toolbar-overlay'
        toolbarContainer.appendChild(overlay)
      } else {        
        overlay.parentNode.removeChild(overlay)
      }

这里是 css 叠加 div


.toolbar-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #e1e1e1;
}

注意：您应该确保叠加层 div 的父级 div 必须定位为相对的才能使此 css 正常工作！

mxgraph：我想向 disable/enable 图表和工具栏添加一个按钮

mxgraph: I would like to add a button to disable/enable the graph and toolbar

html

javascript

css

mxgraph