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

【问题标题】：JSPLUMB: disable nodes drag and drop after a specific user interactionJSPLUMB：在特定用户交互后禁用节点拖放
【发布时间】：2021-07-14 09:25:58
【问题描述】：

我在 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 停止节点可拖动的方法？谢谢。

【问题讨论】：

标签： javascript reactjs jsplumb

【解决方案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。

【讨论】：