Блог

Я использую версию jsplumb для сообщества (версия 2.15.5) в рамках проекта React.

 // 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, но при повторном выполнении эффекта использования ничего не меняется. Мне нужно обновить страницу, чтобы увидеть изменения (т. Е. Сделать мой узел нераскрываемым).

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

 

Похоже, что после выполнения перетаскиваемого метода jsplumb внутренне сохраняет ссылки на элементы DOM, которые можно перетаскивать, и после этого момента эти ссылки нельзя переопределить.

Кто-нибудь знает способ сказать jsplumb, чтобы остановить перетаскивание узлов ? Спасибо.

Вы можете использовать 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 здесь и здесь.