JSPLUMB：在特定用户交互后禁用节点拖放

Question

我在 React 项目中使用社区版的 jsplumb（版本 2.15.5）。

// Outside the component
plumb = jsPlumb.getInstance(mySetting);

...

useEffect(() => {
  // Handle endpoints

  // Handle connections

  plumb.draggable(document.querySelectorAll('.my-node'));

  // Handle listeners

  plumb.repaintEverything();

  return () => {
        plumb.current.unbind('connection');
        plumb.current.unbind('connectionDetached');
        plumb.current.deleteEveryEndpoint();
        plumb.current.deleteEveryConnection();
  };
}, [deps])

我需要使节点可拖动，然后在单击按钮时停止它们以使其可拖动。我尝试使用 if 语句更改可拖动方法的参数，但是当重新执行 useEffect 时没有任何变化。我必须刷新页面才能看到更改（即让我的节点不可拖动）。

if(buttonIsClicked){
  plumb.draggable([]);
}else{
  plumb.draggable(document.querySelectorAll('.my-node'));
}

似乎一旦 draggable 方法被执行，jsplumb 内部保存了哪些是 DOM 元素的引用可以被拖动，在那之后这些引用就不能被覆盖。

有谁知道告诉 jsplumb 停止节点可拖动的方法吗？谢谢

Answer 1

您可以使用 setDraggable() 任意设置一个可拖动属性到 jsplumb 节点，例如：

const plumb = jsPlumb.getInstance({});
plumb.setDraggable(document.querySelectorAll('.dag-node'), false);

或将其 ON/OFF 切换为 toggleDraggable():

const plumb = jsPlumb.getInstance({});
jsPlumbNode.toggleDraggable(document.querySelectorAll('.dag-node'))

我认为官方图书馆网站上没有记录这些函数，但是您可以在相关的 github 存储库中找到一些参考，here and here。

JSPLUMB：在特定用户交互后禁用节点拖放

JSPLUMB: disable nodes drag and drop after a specific user interaction

javascript

jsplumb

reactjs