javascript - 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);

或使用 toggleDraggable() 将其打开/关闭:

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

我不认为官方图书馆网站中记录了这些功能，但是您可以在相关的 github 存储库中找到一些引用资料， here和 here .